为什么在这些内联块div元素之间有一个无法解释的间隙?

在这个例子中，你的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元素之间的空格是非常不可靠的。如果有其他更优的解决方案，请不要使用负边际。

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

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

任何简单的修复，尽管它在这个时间点有点过时，只是float容器。(如。另一方面，每个id应该是唯一的，这意味着你不能在同一个HTML文档中使用相同的id两次。你应该使用class，在这里你可以对多个元素使用相同的class。

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

简单地添加一个边框:2px solid #e60000;到你的第二个div标签CSS。

当然有用

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

找到了一个不涉及Flex的解决方案，因为Flex不能在旧的浏览器中工作。 例子:< / p >

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

你需要加上

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