为什么为两个内联块同胞div中的一个设置行高会影响两个div？

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受行高影响,因为我需要line-height为第一个div 指定一个不同的. 提前致谢.

更新:

检查jsFiddle.

Answer 1

在测试用例中,它现在已经非常清晰了.

添加vertical-align: top到第一个div:

<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

Answer 2

首先，行高仅对行内元素产生影响。当line-height 应用于 block、 inline-block 或任何其他类型的非内联元素时，效果仅作用于内联后代元素。

其次，在行框（将内联元素封装在一行中的抽象框）中，所有内联元素都沿基线对齐。当您更改第二个 div 的行高时，它会在该内联元素的顶部（和底部）添加半行距。上半部领先会将基线推低，从而使第一个 div 降低。

我不太确定您想要实现什么，但是，我建议使用垂直对齐属性或仅使用相对位置。