为什么这些内联块 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

元素的典型特征是它们尊重标记中的空白。这解释了为什么元素之间会产生“间隙”。 （示例） 有一些解决方案可以用来解决这个问题。

方法 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>

方法 2 - 重置 

font-size

由于

inline

元素之间的空白由

font-size

决定，您可以简单地将

font-size

重置为

0

，从而删除元素之间的空格。只需在父元素上设置

font-size: 0

，然后为子元素声明一个新的

font-size

。这是有效的，如此处所示（示例）

#parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

这种方法效果很好，因为它不需要更改标记；但是，如果子元素的 

font-size

使用

em

单位声明，则不起作用。因此，我建议从标记中删除空格，或者浮动元素，从而避免由inline元素生成的空间。方法3 - 将父元素设置为

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>

旁注：

---

使用负边距来删除

inline

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

Answer 2

inline-block

允许在 HTML 中使用空白，这通常相当于 0.25em（或 4px）。

您可以注释掉空白，或者更常见的解决方案是将父级的

font-size

设置为 0 并将其重置回内联块元素所需的大小。

Answer 3

float

容器。 （例如

float: left;

）另一方面，每个

id

应该是唯一的，这意味着您不能在同一个

id

文档中使用相同的

HTML

两次。您应该使用

class

，这样您就可以对多个元素使用相同的

class

。

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

Answer 4

.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

。所以，你需要删除它。