0

我使用以下代码水平堆叠 div：

.basic {
    width:100px;
    position:relative;
    display:inline-block;
    border: 1px solid red;
    text-align:center;
    margin:0;
    padding:0;
}

#container {
    white-space: nowrap;
    border: 1px solid black;
    width:300px;
    overflow:auto;
}

“容器”white-space:nowrap用于水平堆叠它的孩子。然而，水平的孩子在他们的右边有空间。这是一个显示演示的小提琴。检查框布局似乎没有任何边距/填充。但只是一些神秘的“暗物质”将其推出：P

奇怪的是，在我的应用程序的不同地方使用了相同的代码，但是这个异常出现在一个地方，如下图所示：

在此处输入图像描述

不用担心顶部的乱码。我还没有将 div 逆时针旋转 90 度 :) 但是，请注意图像的底部。文本框 div 彼此粘在一起，而顶部的 div 则没有。它们使用与上面相同的 CSS，但结构不同。顶部 div 有两个浮点数，它们被 div 清除，箭头指向底部。所以没有“未清除”漂浮在那里。我没有发布整个 HTML/CSS，而是在小提琴中重新创建了问题。

我不明白的是，即使在有 0 边距/填充和display:inline-block子 div 之后，为什么还有一些空间？我敢肯定这已经在这里被问过很多次了，但为什么会发生一次而不是在另一个地方呢？此外，如何最好地“修复它”？

4

1 回答 1

2

display: inline-block如果当前元素和下一个元素之间存在空格，则在右侧放置一个边距。该空间计算为 4px 和当前字体大小（以ems 为单位）的乘积。请注意此小提琴中第一行和第二行之间的区别：http: //jsfiddle.net/MkasM/

在您的情况下，这可以通过设置简单地控制，margin-right: -4px因为您没有更改font-size.

更多信息：http: //css-tricks.com/fighting-the-space-between-inline-block-elements/

此外，如果您还没有给您的元素提供“box-sizing:border-box”，这是一个很好的做法。它将包含块内的“填充”和边框宽度，因此不会干扰布局。
阅读： http: //paulirish.com/2012/box-sizing-border-box-ftw/

于 2012-09-16T01:19:31.703 回答