Why is content of the inline-block affects its position in the container

Question

Here's a fiddle that shows my code in action

The result seems crazy to me: in Chrome second button is slightly above the first. In Firefox it is slightly below.

<div id="accounts">
  <button class="account">
     <h1>VISA Card</h1>
     <span class="balance">-433.18</span>
  </button>
  <button class="account">
     <h1 class="plus"><i class="icon icon-plus-sign"></i></h1>
     <span class="plus-text">Add Account</span>
  </button>
</div>

What is even more confusing is that padding on the h1.plus affects the position of the whole div.

What is going on here? I want two buttons to show up on the same line and simply don't undestand why they aren't. Is this a bug in the rendering engine?

UPDATE: Narendra suggested an easy fix - float:left the buttons. I want to figure out why this misalignment happening in the first place.

user123444555621 · Accepted Answer · 2013-06-28T23:47:26.540

17

You are using display:inline-block, so the buttons are aligned by their vertical-align property, which defaults to baseline.

This is a diagram from the specs which illustrates exactly that:

enter image description here

You can see in the first two boxes how padding and the font size of the content influence the positioning.

As a fix, use vertical-align: top or bottom, or even middle.

Edit: The image is from the table section and the situation is slighty different for inline-blocks.

edited Jun 28 '13 at 23:47

answered Jun 27 '13 at 07:29

user123444555621

148,182
27
114
126

This must be it. Thanks for weighing in. Baseline of the cell is determined by its content. Spec says "The baseline of a cell is the baseline of the first line of text in the cell" though after some experiments I'm not convinced it's the case. Difference between FF and Chrome was caused by different default button styles in two browsers. – Boycott Russia Jun 28 '13 at 02:35
@Paul Not quite. I linked to the *table* section of the spec, because it contains a nice image. However, the situation is slightly different [for inline-blocks](http://www.w3.org/TR/CSS2/visudet.html#leading): "*The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.*" See also this example: http://jsfiddle.net/Gq3U8/26/ – user123444555621 Jun 28 '13 at 07:22
@user123444555621, this is one of the best questions I’ve ever found. Thank you, it really helped me! – gnclmorais Aug 05 '15 at 14:04

score 1 · Answer 2 · answered Jun 27 '13 at 04:01

1

Add this to your button.account: vertical-align: middle; .

And you can lose the display: inline-block; property, as it is not needed.

answered Jun 27 '13 at 04:01

Gimmy

3,781
2
18
27

vertical-align:middle worked, thanks. Other option is ".account * {line-height: 20px; }". But why? – Boycott Russia Jun 27 '13 at 04:09

score 0 · Answer 3 · answered Jun 27 '13 at 03:38

0

Check below code

button.account {
    display: block;
    float: left;
    height: 80px;
    margin: 10px 10px;
    padding: 10px 5px;
    width: 170px;
}
.account h1 {
    font-size: 16px;
    height: 16px;
    margin: 0 0 5px;
    padding: 4px 0 2px;
}
.account .balance {
    display: block;
    font-size: 24px;
}

.account h1.plus {
    font-size: 24px;
    padding-top: 0px;
}

Here is the fiddle http://jsfiddle.net/Gq3U8/13/

answered Jun 27 '13 at 03:38

Narendra

3,069
7
30
51

Thanks, I've experimented with your code a bit, and only change necessary is float:left;. Any ideas why it doesn't work without it? – Boycott Russia Jun 27 '13 at 03:42
float: left makes the elements to arranged from left side of window. – Narendra Jun 27 '13 at 03:44
I know what float:left does. But why doesn't it work without it? One problem with float is that they don't stretch container. Add a border to the div#accounts, or some content at the bottom of the page and you'll see how things fall apart. – Boycott Russia Jun 27 '13 at 04:18

Qiqi Abaziz · Answer 4 · 2013-06-27T06:25:04.173

-1

If you are using inline-block, the main concern is about the whitespace (you will see the default margin around the element). To fix this just add vertical-align:top, instead of using float:left. It will align the element to the top.

.account {
    display: inline-block;
    vertical-align: top;   /*add this one*/
    margin: 10px 10px;     /*remove this one then can see whitespace*/
}

edited Jun 27 '13 at 06:25

answered Jun 27 '13 at 06:14

Qiqi Abaziz

3,363
3
16
12

Why is content of the inline-block affects its position in the container

4 Answers4