7

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

{display: inline-block}

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

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

4

5 回答 5

14

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

line-height: 0;

将#container修复它。

演示

先试后买

于 2013-09-25T11:17:17.287 回答
4

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

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

jsFiddle 演示

  • PS -line-height: 0也可以。
于 2013-09-25T11:17:14.583 回答
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/

于 2013-09-25T11:34:57.130 回答
1

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

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

#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/

于 2013-09-25T11:23:22.733 回答
0

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

于 2013-09-25T11:22:05.133 回答