Why does setting the line height for one of the two sibling inline-block divs affect both divs?

Question

I have the following:

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

Why does the presence of the line-height property for the second div also affect the first div? And how to fix this, I only need the second div to be executed by the line, because I need to specify a different line-height for the first div. Thanks in advance.

UPDATE:

Check out jsFiddle.

Answer 1

In the test case, it is 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 visual demonstration:
http://www.brunildo.org/test/inline-block.html

Answer 2

First, the line-height effect only depends on inline elements. When a row-height is applied to a block , an inline block, or any other type of element that is not inline, it is used only for inline stream elements .

Secondly, in a linear line (an abstract block containing inline elements in a line), all inline elements are aligned along the baseline. When you change the line height for the second div, it adds half the leading line at the top (and bottom) of this inline element. And the upper half leads pushing the base level lower, which in turn moves the first div below.

I'm not quite sure what you are trying to achieve, but I would recommend using the vertical-align property or just using the relative position.

Answer 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 it. it will work.