Question

我正在使用980网格，8个边距，2个填充和每个容器的宽度为176，给我5个横跨。我正在使用Firefox来测试。

我决定测试它以确保它有效，并且最初为每个网格大小设置了内联块，以便它自动排列。我试图在一个980px宽的容器中放置5个带有0边距和0填充的容器，但是注意到176个尺寸的容器中只有4个按行排列。

然后我从inline-block变为float：left和突然，就像魔法一样，一切都正常排列，我可以在容器内得到5。我检查了一下，并且inline-block在每个容器的每个边缘占用额外的4px（不得不使用内联块将宽度降低到172px以使5个容器显示在一行中）。

我的问题：是什么导致内联块每侧使用额外的4px？这是设计的吗？我没有使用边框或任何会导致宽度增加的东西。

以下是我的CSS：

.gSite{
    width: 980px;
    margin: 0px;
    padding: 0px;
    clear:both;
    margin-left: auto;
    margin-right: auto;

    background-color: blue;
}

.g1{
    margin: 8px;
    padding: 2px;
    width: 176px;
    float: left;

    background-color: red;
}

div#bodyContent{
}

HTML：

<div id="bodyContent" class="gSite">
                    <div class="g1">
                        1A
                    </div>
                    <div class="g1">
                        2A
                    </div>
                    <div class="g1">
                        3A
                    </div>
                    <div class="g1">
                        4A
                    </div>
                    <div class="g1">
                        5A
                    </div>
                    <div class="g1">
                        1B
                    </div>
                    <div class="g1">
                        2B
                    </div>
                    <div class="g1">
                        3B
                    </div>
                    <div class="g1">
                        4B
                    </div>
                    <div class="g1">
                        5B
                    </div>
                </div>

Answer 1

是的，它们之间有空格 - 换行符和大约10个空格字符。比较一下：

.gSite {
    width: 980px;
    margin: 0px;
    padding: 0px;
    clear:both;
    margin-left: auto;
    margin-right: auto;
    background-color: blue;
}
.g1 {
    margin: 8px;
    padding: 2px;
    width: 176px;
    display:inline-block;
    background-color: red;
}
div#bodyContent {
}

<div id="bodyContent" class="gSite">
    <div class="g1">1A</div>
    <div class="g1">2A</div>
    <div class="g1">3A</div>
    <div class="g1">4A</div>
    <div class="g1">5A</div>
    <div class="g1">1B</div>
    <div class="g1">2B</div>
    <div class="g1">3B</div>
    <div class="g1">4B</div>
    <div class="g1">5B</div>
</div>

到此：

.gSite {
    width: 980px;
    margin: 0px;
    padding: 0px;
    clear:both;
    margin-left: auto;
    margin-right: auto;
    background-color: blue;
}
.g1 {
    margin: 8px;
    padding: 2px;
    width: 176px;
    display:inline-block;
    background-color: red;
}
div#bodyContent {
}

<div id="bodyContent" class="gSite">
<div class="g1">1A</div><div class="g1">2A</div><div class="g1">3A</div><div class="g1">4A</div><div class="g1">5A</div><div class="g1">1B</div><div class="g1">2B</div><div class="g1">3B</div><div class="g1">4B</div><div class="g1">5B</div>
</div>

唯一的区别是删除div之间的行和空格。

正如link中的my other answer所述：

使用内联块时产生[sic]的一个问题是空白在HTML中成为屏幕上的视觉空间。

为什么这是我不知道的 - 我怀疑一个古老的IE错误需要持久化，因为这是inline-block最初的来源。

Answer 2

问题在于父元素中文档字体大小的继承。通过指定

send_mail

在父级上，清除间隙。

如果要按文档的根部缩放对象/元素。我建议创建一个助手类或类似的类，并在这种情况下将其附加到正文和元素上；

font-size: 0;

可以原样使用；

.null {
  font-size: 0;
}

.font-root {
  font-size: 16px;
}

.column {
  display: inline-block;
  width: 33.333335%;
}

将提供3个均分的列。还具有良好的向后兼容性（不确定距离多远）。

CSS inline-block vs float left：alignment mismatch

2 个答案: