Home/ Questions/Q 4100182
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T20:32:00+00:00

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

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0