I came across an interesting HTML button tag behavior while trying to style a button that has no text inside, only a font icon -- the button without text causes all subsequent buttons which do have text to be pushed down. The issue only appears when the buttons have a height
attribute specified.
JSFiddle
<header>
<button><!-- No text here --></button>
<button>This button is pushed down</button>
</header>
button { height: 40px; }
At first I was sure it was due to the font icon inside the first button that did some weird baseline magic, but as you can see from the minimal working example, the behavior is maintained when there is no content at all inside the button.
I can fix this by adding content to the first button, but because my only content is a <span class="icon user"></span>
, which is a font icon, it does in fact interfere with the font baseline, and positions the button off just a few pixels. This is why I have decided to position the icon inside absolutely, which fixes the original slight positioning issue, but introduces this new one, as the button now acts as if it were empty.
So, the question remains -- how do I avoid positioning issues with empty buttons?
Note: it seems that the above only happens on webkit browsers; Firefox positions buttons with text correctly, but pushes the empty ones up.
A button element is valid anywhere in the document body where text-level markup may appear. Such an element need not have any relationship to a form element.
Always use <button> for clickable elements. Always try to use <button> when element is clickable, but it is not a link. Avoid <a> , <span> , <div> and other elements. Note that display: flex works differently on buttons in different browsers, but we have easy fix for that.
Button is a Form Element A <button> element in a <form> , by default, behaves identically to that submit input above. However gross the UX, forms can have reset buttons as well.
Buttons can contain child elements A submit button and a submit input ( <input type="submit"> ) are identical in functionality, but different in the sense that an input is unable to contain child elements while a button can.
It is because the button
is an inline
element, which is aligned to baseline by default.
From W3C :
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.
Inorder to align them correctly, use vertical-align: top;
(Or middle
, bottom
as a value)
button {
height: 40px;
margin-left: 5px;
vertical-align: top;
}
Demo
On the other hand you can also use zero width space entity ​
- Demo
This behavior is common with inline
and inline-block
elements, if you want to avoid everything above, you can use float
here, than you won't need the vertical-align
property as float
will force the button
to be inline as well as block level
Demo (Using float: left;
)
Note: If you are going with
float
, just make sure you clear them, if you aren't sure whatclear
means, than refer my answer here which will explain in detail.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With