7

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.

2 Answers 2

14

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 &#8203; - 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 what clear means, than refer my answer here which will explain in detail.

2
  • Thanks, both solutions work great for me! Are there any reasons for preferring one over the other?
    – Elise
    Feb 8, 2014 at 12:04
  • @Elise If you go for second solution, you will have to add the entities in your HTML document, if you prefer CSS, I would suggest you to use vertical-align: bottom; instead.. :) and you welcome..
    – Mr. Alien
    Feb 8, 2014 at 12:06
1

add text to the button and indent the text off the screen. This will solve your problem as well as helping with your SEO as robots indexing your site can register text but not the content of the image.

button{
    width:;
    height:;
    display:block;
    text-indent:-9999px;
}
2
  • 1
    Thanks, I do have text inside the button for screen readers, but I am using the trick from here (see item 8) to hide it, which causes the text not to take up any actual space.
    – Elise
    Feb 8, 2014 at 12:18
  • the tips you highlight uses absolute positioning which takes the elelment out of the flow, hence the container collapsing. Try the text-indent instead.
    – otherDewi
    Feb 9, 2014 at 9:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.