我有三个水平堆叠在一起的 div,这些 div 被设置为 display:inline-block。但是,我注意到即使使用某种 CSS 重置,它们之间仍会产生一个小的 4px 距离?这是为什么呢?有没有办法全局消除这种情况,或者我只需要将这些 div 左移 4px?
假设这是因为每个关闭标签后的换行字符。在HTML中,这些被处理为空格。尝试移除它们。以下是几个演示:
http://jsfiddle.net/eeRFC/ - 包含空格
<div>test</div>
<div>test</div>
<div>test</div>
http://jsfiddle.net/eeRFC/1/ - 没有空格
<div>test
</div><div>test
</div><div>test
</div>
还有常见的CSS:
div {
border:solid 1px black;
display:inline-block;
}
去掉前一个div结束和下一个div开始之间的换行符,例如将以下内容替换为:
<div id="div1">
Div Item 1
</div>
<div id="div2">
Div Item 2
</div>
使用
<div id="div1">
Div Item 1
</div><div id="div2">
Div Item 2
</div>
<style>
* {
margin: 0;
border: 1px solid black;
}
div {
display: inline-block;
}
</style>
<div>
Div1
</div>
<div>
Div2
</div>
<div>
Div3
</div>
你可以使用两种方法来去除div之间的空格。一种方法是去掉div元素之间的分隔符,像这样:
<div>
Div1
</div><div>
Div2
</div><div>
Div3
</div>
...
div {
display: inline-block;
float: left;
}
...