CSS inline-block vs float left：对齐不匹配答案

【问题标题】：CSS inline-block vs float left: alignment mismatchCSS inline-block vs float left：对齐不匹配
【发布时间】：2015-01-27 05:53:54
【问题描述】：

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

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

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

我的问题：是什么导致 inline-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>

【问题讨论】：

CSS / HTML% Mystery White space issue 的可能重复项
inline-blocks之间有空格吗？
@Rhumborl 略有不同，我知道有一些奇怪的问题（以及如何解决它），但链接的问题并没有问它为什么这样做，只是如何解决它。如果可能的话，我真的很想使用 inline-block 因为它更简单，而且它应该（据我所知）工作相同
显然将 div 放在新行上算作空白？很奇怪..这是一个错误还是打算这样工作？

标签： html web css

【解决方案1】：

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

font-size: 0;

在父级上，清除被删除。

在您按文档根目录缩放对象/元素的情况下。我建议创建一个辅助类或类似的类，并在这种情况下将其附加到主体和元素；

.null {
  font-size: 0;
}

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

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

可以这样使用；

<body class="font-root">
    ...
    <div class="null"> /* removes all weird offsets for children */
      <div class="font-root column">Hi</div> /* restores base size for relative emulation */
      <div class="font-root column">Hi</div>
      <div class="font-root column">Hi</div>
    </div>
    ...
</body>

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

【讨论】：

【解决方案2】：

是的，它们之间有空格 - 一个换行符和大约 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 之间的行和空格。

正如my other answer 中的link 所述：

使用 inline-block 时出现的一个问题[原文如此] 是空格在 HTML 中成为屏幕上的视觉空间。

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

【讨论】：

基本上只是用davidwalsh.name/remove-whitespace-inline-block#comment-61052 输入这个作为答案。换行符通常应该算作空格吗？对他们来说似乎很容易解决（然后我可能又错了）:-(如果没有使用标签和换行的能力，我如何保持任何可读性和组织性？
您希望换行符像用于内联渲染的空间一样工作。如果在浏览器渲染多行源文本时没有这样做，则一行的最后一个单词将紧邻下一行的第一个单词，它们将显示为一个单词。
有没有偶然使用 js 的优雅解决方案？我个人js不强，不知道具体会怎么样。
@DavidTorrey - 将 JS 视为一种解决方案，至少有 15 种解决方案以各种形式解决该问题，一些在 HTML 中，一些在 CSS 中，还有一个在 JS 中。没有一个是优雅的。