为什么内联块 div 的容器会变得太高？答案

【问题标题】：Why does a container of inline-block divs become too high?为什么内联块 div 的容器会变得太高？
【发布时间】：2013-09-25 22:25:24
【问题描述】：

我有一个容器 div 和 5 个子 div

{display: inline-block}

因此它们彼此相邻出现。每个子 div 的高度都是 20px，但容器会增长到 24px 的高度。为什么会这样？

小提琴：http://jsfiddle.net/VHkNx/

【问题讨论】：

此链接可能会有所帮助：stackoverflow.com/questions/1833734/…

标签： html css

【解决方案1】：

内联块元素仍然负责行高/字体大小。所以添加这个：

line-height: 0;

到#container 会修复它。

演示

Try before buy

【讨论】：

【解决方案2】：

一旦您使用inline-block 显示，您的元素的行为就类似于单词和字母。空格和行高也会被渲染，这可能会导致一些意想不到的结果。

解决这个问题的一种方法是给容器font-size: 0 设置（当然你仍然可以给子元素自己设置font size）。

jsFiddle Demo

P.S - line-height: 0 也可以。

【讨论】：

【解决方案3】：

解决此问题的一种简单方法是将vertical-align: top 添加到子元素：

.thing {
    vertical-align: top;
    display: inline-block;
    background-color: Red;
    height: 20px;
    width: 18%;
    margin-left: 1.25%;
    margin-right: 1.25%;
}

这样，您无需调整行高或字体大小。

如前所述，可以使用浮动来实现类似的布局。两种方法都有效。参见演示：http://jsfiddle.net/audetwebdesign/74Y2V/

【讨论】：

感谢您的建议，如果子元素包含文本，则将font-height 或line-height 设置为0 是不可行的方法。这对我有帮助。

【解决方案4】：

行内块元素作为块放置在文本行的基线上，因为它们是内联元素，所以从基线到文本行底部的空间占用空间。

您可以使用浮动元素代替内联元素：

#container {
    background-color: Green;
    width: 500px;
    overflow: hidden;
}

.thing {
    float: left;
    background-color: Red;
    height: 20px;
    width: 18%;
    margin-left: 1.25%;
    margin-right: 1.25%;
}

#first {margin-left: 0px;}
#last {margin-right: 0px;}

演示：http://jsfiddle.net/VHkNx/2/

【讨论】：

【解决方案5】：

最简单的方法是不给它们 display: inline-block，而是使用 float: left; .所有元素将彼此相邻浮动。祝你好运！

【讨论】：

在小提琴上试试这个解决方案，看看会发生什么。
“float”属性与大多数元素混淆，因此创建一个新类（即“clear{clear:both}”）是一个好习惯，在浮动元素。在您的情况下，在浮动块之后添加一个带有我上面提到的类的空 div 元素，或者只是这个
，一切都会好起来的！我试过了，效果很好。
不需要这个。见 Guffa 的回答