我有两个内联块div元素，它们是相同的，彼此相邻。然而，尽管边缘设置为0，两个div之间似乎有一个神秘的4像素空间。没有父母潜水影响他们-发生了什么?
CSS
#container
{
display:inline-block;
position:relative;
background:rgb(255,100,0);
margin:0px;
width:40%;
height:100px;
}
这是我想要的效果:
当前回答
任何简单的解决方法，尽管在这个时间点上有点过时，只是浮动容器。(如。浮:左,)另一方面，每个id应该是唯一的，这意味着您不能在同一个HTML文档中两次使用相同的id。您应该使用一个类，可以对多个元素使用同一个类。
.container {
position: relative;
background: rgb(255, 100, 0);
margin: 0;
width: 40%;
height: 100px;
float: left;
}
其他回答
找到了一个不涉及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;
}
任何简单的解决方法，尽管在这个时间点上有点过时，只是浮动容器。(如。浮:左,)另一方面，每个id应该是唯一的，这意味着您不能在同一个HTML文档中两次使用相同的id。您应该使用一个类，可以对多个元素使用同一个类。
.container {
position: relative;
background: rgb(255, 100, 0);
margin: 0;
width: 40%;
height: 100px;
float: left;
}
使用内联块允许在你的HTML空白，这通常等于。25em(或4px)。
您可以注释掉空白，或者更常见的解决方案是将父元素的font-size设置为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。所以，你需要移除它。
添加边框:2px solid #e60000;到你的第二个div标签CSS。
当然有用
#Div2Id {
border: 2px solid #e60000; --> color is your preference
}
