html - Why does setting line-height for one of two inline-block sibling divs effect 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 having a line-height property set for the second div also effects the first div? And how to correct for this i only need the second div to be effected by line-height because I need to specify a different line-height for the first div. Thanks in advance.

document.getElementById('go').onclick = function(e) {
  document.getElementById('div_2').style.lineHeight = '30px';
};

<button id="go">Go</button>
<div>
  <div style="display:inline-block;" id="div_1">div_1</div>
  <div style="display:inline-block; line-height:24px;" id="div_2">div_2</div>
</div>

Answer 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