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

Question

我有两个内联块级div元素，它们完全相同，位置相邻。然而，在这两个

之间似乎存在一个神秘的4像素空间，尽管边距被设置为0。没有影响它们的父

- 到底发生了什么？

CSS

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

我希望它看起来像这样：

- Legatro

---

有一个更简单的答案，但这个问题太老了，我只能把它作为评论。不要使用inline-block使它们并排，只需使用float: left并居中它们的容器。在我的测试中没有间隙。 - Steampunkery

Answer 1

在这种情况下，您的

元素已从块级元素更改为内联元素。内联元素的典型特征是它们遵循标记中的空格。这就解释了为什么元素之间会生成一个空格间隙。(示例) 有几种解决方法可用于解决此问题。

方法1-从标记中删除空格 示例1-注释空格：(示例)

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

例子2 - 去除换行符：(示例)

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

示例 3 - 在下一行关闭标签的一部分 (示例)

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

示例4 - 在下一行关闭整个标签：(示例)

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

方法二 - 重置font-size

由于inline元素之间的空格是由font-size决定的，因此您可以简单地将font-size重置为0，从而删除元素之间的空格。

只需在父元素上设置font-size: 0，然后为子元素声明一个新的font-size。这个方法可行，如此示例所示(example)

#parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

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

第三种方法-将父元素设置为display：flex 在某些情况下，您还可以将父元素的display设置为flex。(示例) 这实际上消除了受支持的浏览器中元素之间的空格。不要忘记添加适当的供应商前缀以获得其他支持。

.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>

---

附注：

使用负边距来消除行内元素之间的空格是极不可靠的。如果有其他更优化的解决方案，请不要使用负边距。

- Josh Crozier

---

好的，我想我可以通过使用负边距来修补它 - 谢谢 :) 不过我不知道该如何消除空白 - 啊，我会去研究一下。 - Legatro

由于没有人真正解释这种情况发生的原因...inline（和inline-block）元素会保留标记中的空格，所以你看到的本质上是标记中“单词”之间的空格字符。这就是为什么设置负word-spacing也可以“修复”此问题，尽管负的word-spacing和负的margin都不是有效的解决方案，因为间距取决于你的浏览器和字体大小（正如Josh最后一个示例所演示的那样），所以如果进行任何更改，这将是首先出现问题的部分。 - colllin

当你花费20分钟来调试你的CSS，却发现Chrome缩放到110％，其实根本没有任何问题。 - Imperative

我会说，display: flex 是如今最好的解决方案。 - Alan Shortis

font-size 是我使用的唯一一个可以在两个 inline-block 元素之间增加额外垂直空间的属性（这两个元素被设置为 inline-block，是为了让它们在另一个 div 中水平居中对齐）。flex 属性会完全破坏布局。 - poshest

Answer 2

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

您可以将空格注释掉，或者更常见的解决方法是将父元素的font-size设置为0，然后在inline-block元素上重新设置所需的大小。

- Paulie_D

---

这是一个很酷的解决方案，我从未想过，但不幸的是它破坏了字体大小的正常CSS继承 :/ - colllin

@colllin 是的，确实会有这个问题......但你只需要意识到它。inline-block和float都有它们的“陷阱”......如何解决取决于个人选择。字体解决方案是其中一种选择，但不是唯一的选择。 - Paulie_D

当然，减少我需要注意的事情总是一件好事，保护自己免于在6个月后意外破坏某些东西也是如此。 - colllin

@Pauli_D 你也可以在元素之间添加注释，因为它们不仅可以在文档中去除空格，还可以在网站上去除空格。当你有大量元素时，这可能会有点丑陋和麻烦。 - Niklas Vest

谢谢，我非常清楚处理inline-block的各种方法......这只是两年前的其中一种。 - Paulie_D

Answer 3

尽管这种方法有点过时，但是一个简单的解决方法就是对容器进行 float 操作（例如：float: left;）。另外需要注意的是，在同一 HTML 文档中无法多次使用相同的 id，因为每个 id 应该是唯一的。您应该使用 class 来替代，可以在多个元素中使用相同的 class。

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

- bradcush

---

虽然这确实起作用（谢谢），但它会导致我的页面布局中的其他问题，我现在可能还不够有经验来解决。 - Legatro

通过添加 float 属性，您强制元素作为块级元素进行操作，因此 display: inline-block 不适用。 - sunpietro

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;
}

- Larry

Answer 5

只需在第二个div标签的CSS中添加2px solid #e60000边框即可。

肯定有效。

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

- Podile venkata krishna

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。所以，你需要将其移除。

- BigFan