title: Why does setting line-height for one of two inline-block sibling divs effect both divs?
body: <p>I have the following:</p>
  <pre><code>&lt;div&gt;
      &lt;div style=&quot;display:inline-block; &quot;&gt;div_1&lt;/div&gt;
      &lt;div style=&quot;display:inline-block; line-height:20px;&quot;&gt;div_2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>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 <code>line-height</code> for the first div.  <em>Thanks in advance.</em></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('go').onclick = function(e) {
    document.getElementById('div_2').style.lineHeight = '30px';
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="go"&gt;Go&lt;/button&gt;
  &lt;div&gt;
    &lt;div style="display:inline-block;" id="div_1"&gt;div_1&lt;/div&gt;
    &lt;div style="display:inline-block; line-height:24px;" id="div_2"&gt;div_2&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>