为什么这些内联块div元素之间存在无法解释的差距？

Question

我有两个内联块div元素，它们是相同的，位于彼此旁边。然而，尽管边距设置为0，但两个div之间似乎有一个4像素的神秘空间。没有父div影响它们 - 发生了什么？

CSS

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
}

这就是我想要的样子：

Answer 1

在这种情况下，您的div元素已从block级元素更改为inline元素。 inline元素的典型特征是它们尊重标记中的空白。这解释了为什么在元素之间产生空间的间隙。 (example)

有一些解决方案可用于解决此问题。

方法1 - 从标记中删除空格

示例1 - 评论空白：(example)

<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>

示例2 - 删除换行符：(example)

<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>

示例3 - 在下一行(example)上关闭部分代码

<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>

示例4 - 关闭下一行的整个代码：(example)

<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>

方法2 - 重置font-size

由于inline元素之间的空白由font-size确定，您只需将font-size重置为0，即可删除元素之间的空格。

只需在父元素上设置font-size: 0，然后为children元素声明一个新的font-size。这有效，如(example)

所示

#parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

这种方法非常有效，因为它不需要更改标记;但是，如果使用font-size单位声明子元素的em，则它不起作用。因此，我建议从标记中删除空格，或者floating the elements，从而避免inline元素生成的空格。

方法3 - 将父元素设置为display: flex

在某些情况下，您还可以将父元素的display设置为flex。 (example)

这有效地删除了supported browsers中元素之间的空格。不要忘记添加适当的供应商前缀以获得额外支持。

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

<div class="parent">
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
</div>

---

侧面说明：

使用负边距去除inline元素之间的空间是非常不可靠的。如果有其他更优化的解决方案，请不要使用负边距。

Answer 2

使用inline-block可以在HTML中使用空格，这通常相当于.25em（或4px）。

您可以注释掉空白区域，或者更常见的解决方法是将父级font-size设置为0并将其重置为内联块元素上所需的大小。

Answer 3

inline-block会像所有人一样自动设置默认white-space。 （这是由于元素“内联”属性，与HTML标记中文本字符串中单词之间的间距相同。这就是为什么在标记中删除white-space也有效。）最简单修复只是float容器。 （例如。float: left;）另一方面，每个id都应该是唯一的，这意味着您不能在同一id文档中使用相同的HTML两次。您应该使用类，在这里您可以对多个元素使用相同的class。

.container {
    display: inline-block;
    position: relative;
    background: rgb(255, 100, 0);
    margin: 0;
    width: 40%;
    height: 100px;
    float: left;
}

Answer 4

找到一个不涉及Flex的解决方案，因为Flex在较旧的浏览器中不起作用。 例如：

.container {
    display:block;
    position:relative;
    height:150px;
    width:1024px;
    margin:0 auto;
    padding:0px;
    border:0px;
    background:#ececec;
    margin-bottom:10px;
    text-align:justify;
    box-sizing:border-box;
    white-space:nowrap;
    font-size:0pt;
    letter-spacing:-1em;
}

.cols {
    display:inline-block;
    position:relative;
    width:32%;
    height:100%;
    margin:0 auto;
    margin-right:2%;
    border:0px;
    background:lightgreen;  
    box-sizing:border-box;
    padding:10px;
    font-size:10pt;
    letter-spacing:normal;
}

.cols:last-child {
    margin-right:0;
}

Answer 5

只需添加边框：2px solid #e60000;到你的第二个div标签CSS。

绝对有效

#Div2Id {
    border: 2px solid #e60000; --> color is your preference
}

Answer 6

您需要添加

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
    margin-right:-4px;
}

因为无论何时写display:inline-block，都需要额外的margin-right:4px。所以，你需要删除它。