为什么为两个内联块同胞div中的一个设置行高会影响两个div？ [英] Why does setting line-height for one of two inline-block sibling divs effect both divs?

问题描述

我有以下：

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

为什么为第二个div设置line-height属性也会影响第一个div？如何纠正这个我只需要第二个div由line-height实现，因为我需要为第一个div指定一个不同的 line-height 。 提前感谢。

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.

更新：

检查 jsFiddle。

推荐答案

向第一个div添加 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/ < a>

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/

对于视觉演示也很有用：

http://www.brunildo.org/test/inline-block.html

Also useful, for a visual demonstration:
http://www.brunildo.org/test/inline-block.html

这篇关于为什么为两个内联块同胞div中的一个设置行高会影响两个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！