Why Does Setting Line-height For One Of Two Inline-block Sibling Divs Effect Both Divs?

I have the following:

div_1

div_2

&

Solution 1:

With the test case, it's now crystal clear.

Add vertical-align: top to the first div:

<div style="display:inline-block; line-height:24px; vertical-align: top" id="div_1">div_1</div>

Fixed version: http://jsfiddle.net/my6Su/5/

Read this to understand the relationship between display: inline-block and vertical-align: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Also useful, for a visual demonstration:
http://www.brunildo.org/test/inline-block.html

Solution 2:

Firstly, the effect of line-height is only on inline elements. When line-height is applied to block, inline-block or any other type of element that is not inline, the effects are on the inline descendant elements only.

Secondly, in a line-box (an abstract box enclosing inline elements in a line), all the inline elements are aligned along the baseline. When you change the line-height for the second div, it adds half-leading at the top (and bottom) of that inline-element. And top half-leading pushes the baseline lower, which in turn moves the first div lower.

I am not exactly sure what you are trying to achieve, but, I would recommend either using the vertical-align property or just use position relative.

Solution 3:

<div>
    <div style="display:inline-block; line-height:10px;">div_1</div>
    <div style="display:inline-block; line-height:20px;">div_2</div>
</div>

try this. this will work.

Share