我有一些 span/div block 定义了宽度和高度并将显示设置为 inline-block 但这些 block 之间有一些间隙所以我使用了 margin:0px; 但仍然存在差距，我必须使用负边距值来消除该差距。
这是我正在使用的代码
//HTML SPAN BLOCKS//
<body>
<span class="pro" id="1"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
</body>
//CSS//
body{margin:0px;}
.pro{
width:300px;
height:300px;
display:inline-block;
border:1px solid #FF0004;
margin:0px;
padding:0px;
}
#1{
background:#FF0004;
}
我正在给背景提供 ID，但它不起作用。跨度 block 之间的边距在 Internet Explorer 中为 0(当设置为 0 时)。
当我在这些标签中添加一些内容(文本)时，整个布局都乱七八糟。所有方 block 从其位置上下移动
最佳答案
inline-block 元素之间的空格是由父元素的 font-size 引起的，在您的例子中是 BODY 元素。要解决此问题，请将父元素的 font-size 设置为 0，然后在 .pro 中定义新的 font-size > 元素。
这是通过使用 .clearGaps 容器包装内容而不影响 body 元素的 font-size 的解决方案。
https://jsfiddle.net/jrv4zp5d/1/
html:
<div class="clearGaps">
<span class="pro" id="1"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
</div>
CSS:
body{
margin: 0px;
}
.clearGaps {
font-size: 0;
}
.pro{
width:300px;
height:300px;
display:inline-block;
border:1px solid #FF0004;
font-size: 12px; /* restore font size after clearing gaps */
}
#1{
background:#FF0004;
}
祝你好运
关于html - span/div block 之间的边距未设置为 0px，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32338599/