button with icon break vertical position alignment

I'm trying to keep two button on the same level, but the button with an icon in it breaks the vertical alignment. I've tried to Google for answer but I couldn't come up with the right keywords for this bug. Desired behaviour Two buttons stay on the same level vertically Actual behaviour The button with icon 'jumped' up from it's supposed position I'm using tailwindcss and lucide icons. I have not been very good at css and finding resources/solution related to css so any help is appreciated. Thanks in advanced! The Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Button with icon</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
</head>
<body>
<div class="border border-red-500">
<button
class="text-md inline-flex h-9 items-center justify-center rounded-md bg-slate-500 p-2"
>
Button
</button>
<button
class="text-md inline-flex h-9 items-center justify-center rounded-md bg-slate-500 p-2"
>
<i data-lucide="chevron-left"></i>With Icon
</button>
</div>
<script>
lucide.createIcons();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Button with icon</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
</head>
<body>
<div class="border border-red-500">
<button
class="text-md inline-flex h-9 items-center justify-center rounded-md bg-slate-500 p-2"
>
Button
</button>
<button
class="text-md inline-flex h-9 items-center justify-center rounded-md bg-slate-500 p-2"
>
<i data-lucide="chevron-left"></i>With Icon
</button>
</div>
<script>
lucide.createIcons();
</script>
</body>
</html>
3 Replies
Mannix
Mannix17mo ago
you can either change the size of the icon or put flex/inline-flex on the parent element of the buttons
Chris Bolson
Chris Bolson17mo ago
this flex items-center gap-1 on the parent div will resolve your issue
EddieY
EddieY17mo ago
Thanks @mannix_ and @Chris ! Flex solves the issue. Do you know why does the problem happen in the first place and how does flex solves it? It seems to be something to do with the icon height. I tried to shrink the size of the icon and the button starts going to the other direction.
Want results from more Discord servers?
Add your server