Here's my setup:
<div>
<div style="display:inline-block; ">div_1</div>
<div style="display:inline-block; line-height:20px;">div_2</div>
</div>
Why does setting the line-height property for the second div also affect the first div? And how can I correct this so that only the second div is affected by line-height, as I need to specify a different line-height for the first div. Thank you 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>