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


Why is there an unexplainable gap between these inline-block div elements?

我有两个彼此相邻的内联块div元素，它们是相同的。 但是，尽管将边距设置为0，但两个div之间似乎仍有4像素的神秘空间。没有父div会影响它们-怎么回事？

CSS

1
2
3
4
5
6
7
8
9
#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
}

Div problem

这就是我想要的样子：

What it SHOULD look like

相关讨论

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

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

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

示例1-将空白注释掉：(示例)

1
2
3
4
5
text<!--
-->text<!--
-->text<!--
-->text<!--
-->text

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

1
texttexttexttexttext

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

1
2
3
4
5
text</div
>text</div
>text</div
>text</div
>text

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

1
2
3
4
5
text
text
text
text
text

方法2-重置font-size

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

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

1
2
3
4
5
6
7
#parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

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

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

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

这样可以有效地删除受支持的浏览器中元素之间的空格。不要忘记添加适当的供应商前缀以获取其他支持。

1
2
3
4
5
6
7
8
.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

1
2
3
4
5
6
7
8
.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}
1
2
3
4
5
    text
    text
    text
    text
    text

侧面注意事项：

使用负边距来消除inline元素之间的间隔是非常不可靠的。如果还有其他更好的解决方案，请不要使用负边距。

相关讨论

使用inline-block可以在HTML中留出空格，这通常等于.25em(或4px)。

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

相关讨论

inline-block会像每个人所说的那样自动设置默认的white-space。 (这是由于元素的"内联"属性，与HTML标记中的文本字符串中的单词之间的间距相同。这就是为什么在标记中删除white-space也起作用的原因。)最简单的解决方法是float容器。 (例如float: left;)另一方面，每个id应该是唯一的，这意味着您不能在同一HTML文档中两次使用同一id。您应该改用类，在多个元素中可以使用相同的class。

1
2
3
4
5
6
7
8
9
.container {
    display: inline-block;
    position: relative;
    background: rgb(255, 100, 0);
    margin: 0;
    width: 40%;
    height: 100px;
    float: left;
}
相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.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;
}

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

绝对可以

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

您需要添加

1
2
3
4
5
6
7
8
9
10
#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。因此，您需要将其删除。