html - CSS 内联 block vs 向左浮动 : alignment mismatch

Question

我为每个“容器”使用 980 网格、8 个边距、2 个填充和 176 宽度，跨度为 5。我正在使用 Firefox 进行测试。

我决定对其进行测试以确保其有效，并且最初为每个网格大小设置了内联 block ，以便它自动排列。我试图在一个 980 像素宽的容器中放置 5 个，边距为 0，边距为 0，但我注意到 176 个大小的容器中只有 4 个容器每“行”排列。

然后我从 inline-block 更改为 float: left 突然间，就像变魔术一样，一切都正确排列，我可以在容器中得到 5 个。我检查了一下，inline-block 在某处每个容器的每边额外占用了 4px(必须使用 inline-block 将宽度降低到 172px 才能让 5 个容器显示在一行中)。

我的问题:是什么导致内联 block 每边使用额外的 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状态:

One problem that arrises[sic] when you use inline-block is that whitespace in HTML becomes visual space on screen.

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