在本例中，div元素已从块级元素更改为内联元素。内联元素的一个典型特征是它们尊重标记中的空白。这就解释了为什么元素之间会产生空隙。(例子)

有一些解决方案可以用来解决这个问题。

方法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 -重新设置字体大小

由于内联元素之间的空格是由字体大小决定的，您可以简单地将字体大小重置为0，从而删除元素之间的空格。

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

#parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

这个方法工作得很好，因为它不需要更改标记;但是，如果子元素的font-size是使用em单位声明的，它就不起作用。因此，我建议从标记中删除空白，或者浮动元素，从而避免内联元素生成的空白。

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

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

这有效地消除了受支持的浏览器中元素之间的空格。不要忘记为额外的支持添加适当的供应商前缀。

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

.parent { 显示:flex; ｝ .parent > div { 显示:inline-block; 填充:1 em; 边框:2px实体#f00; ｝ < div class = "父" > < div > < / div >文本 < div > < / div >文本 < div > < / div >文本 < div > < / div >文本 < div > < / div >文本 < / div >

双方指出:

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

使用内联块允许在你的HTML空白，这通常等于。25em(或4px)。

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

任何简单的解决方法，尽管在这个时间点上有点过时，只是浮动容器。(如。浮:左,)另一方面，每个id应该是唯一的，这意味着您不能在同一个HTML文档中两次使用相同的id。您应该使用一个类，可以对多个元素使用同一个类。

.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不能在旧的浏览器中工作。 例子:

.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时，它就会占用一个额外的右边框:4px。所以，你需要移除它。