Question

我有一些span/div块已定义宽度和高度，显示设置为inline-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的背景，但它不起作用。跨度块工作之间的边距在Internet Explorer中为0（当设置为0时）。

JSFIDDLE

当我在这些标签中添加一些内容（文本）时，整个布局都搞砸了。所有块都从其位置上下移动

Answer 1

inline-block元素之间的这个空格是由父项的font-size引起的，在您的情况下是BODY元素。要解决此问题，请将父元素的font-size设置为0，然后在font-size元素中定义新的.pro。

以下是通过使用font-size容器包装内容而不影响正文元素.clearGaps的解决方案。

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

祝你好运

Answer 2

以数字开头的ID将无法在css中使用，除非您在样式表中escape them（我不建议这样做）。因此，我建议将您的ID更改为#p1，您应该没问题。
内联（-block）元素考虑空格。如果从标记中删除空格，或将font-size设置为0，则块之间的间距应消失。或者您也可以将它们转换为block元素。

您的更新小提琴：https://jsfiddle.net/jrv4zp5d/2/

Answer 3

CSS：

span {
  display: inline-block;
}

HTML：

<span>This will have</span>
<span>a gap between the elements</span>

<span>This won't have</span><span>a gap between the elements</span>

最初是@Juan G. Hurtado

Answer 4

或者，对于仅CSS方法，您可以尝试将.pro的显示更改为阻止并指定浮点数。

.pro{
width:300px;
height:300px;
display:block;
float:left;
border:1px solid #FF0004;
margin:0;
padding:0;
}

span / div块之间的边距未设置为0px

4 个答案: