这些内联之间为什么会有无法解释的差距？
我有两个内嵌块div元素，它们是相同的，彼此相邻放置。 然而，尽管边界被设置为0，但两个div之间似乎仍有一个4像素的神秘空间。没有父节点影响它们 - 发生了什么？
CSS
#container
{
display:inline-block;
position:relative;
background:rgb(255,100,0);
margin:0px;
width:40%;
height:100px;
}
这就是我想要的样子：
在这种情况下，您的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;
}
此方法工作得很好，因为它不需要更改标记; 但是，如果使用em单位声明子元素的font-size ，则不起作用。 因此，我建议从标记中删除空白，或者将元素浮动 ，从而避免由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-block允许HTML中的空白，通常等于0.25em（或4px）。
您可以注释掉空格，或者更常见的解决方案是将父级的font-size为0，并将其重置为内联块元素上所需的大小。
inline-block自动允许像每个人都在说的空白区域。 最简单的方法是只添加float：left; 到像这样的容器声明。 你也不能在一个页面上使用两个ID。 改用类。
.container {
display: inline-block;
position: relative;
background: rgb(255, 100, 0);
margin: 0;
width: 40%;
height: 100px;
float: left;
}