为什么为两个行内块级兄弟元素之一设置行高会影响这两个元素？

Question

我有以下内容：

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

为什么设置第二个div的行高属性也会影响第一个div？如何更正，只需要第二个div受到行高的影响，因为我需要为第一个div指定不同的line-height。提前感谢您。

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>

- Babiker

---

请在jsFiddle上制作一个演示您的问题的示例。这将使回答您的问题变得非常容易。 - thirtydot

Answer 1

有了这个测试用例，现在一切都清晰了。

向第一个

元素添加vertical-align: top：

<div style="display:inline-block; line-height:24px; vertical-align: top" id="div_1">div_1</div>

修正版：http://jsfiddle.net/my6Su/5/

阅读以下内容以了解 display: inline-block 和 vertical-align 之间的关系： http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

此外，以下页面可以提供视觉演示：
http://www.brunildo.org/test/inline-block.html

- thirtydot

Answer 2

首先，行高 的效果仅限于内联元素。当 行高应用于块级, 内联块级或任何其他类型的非内联元素时，效果仅适用于内联后代 元素。

其次，在行框中（一个抽象的框，包含一行内联元素），所有内联元素都沿基线对齐。当您为第二个 div 更改行高时，它会在该内联元素的顶部（和底部）添加半导体。而顶部半导体会将基线向下推，进而将第一个 div 向下移动。

我不确定您想要实现什么，但我建议使用 vertical-align 属性或只使用相对定位。

- Vishal Gupta

---

我只能理解你描述的一部分，但你显然对CSS布局的工作原理有很深刻的理解；感谢你的解释！ - Tobias J

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>

试试这个。这个会起作用的。

- Sujit Agarwal

---

请解释这将如何工作，而不仅仅是一小段代码。避免使用内联样式，将其添加为类。如果可能的话，请添加此工作演示以帮助提问者！ - Venkat.R