在进行布局时经常会出现，div与div之间虽然设置为了margin: 0px ，但是依然有间距的问题。
html部分代码如下：
<body>
<div class="main">
<div class="content">
<div class="Sbox">
<div class="boximg"><img src="img/1.jpg"></div>
<div class="boxtext"><p>Batman</p></div>
</div>
<div class="Sbox">
<div class="boximg"><img src="img/2.jpg"></div>
<div class="boxtext"><p>Eminem</p></div>
</div>
<div class="Sbox">
<div class="boximg"><img src="img/3.jpg"></div>
<div class="boxtext"><p>Skrillex</p></div>
</div>
<div class="Sbox">
<div class="boximg"><img src="img/4.jpg"></div>
<div class="boxtext"><p>Hearthstone</p></div>
</div>
<div class="Sbox">
<div class="boximg"><img src="img/5.jpg"></div>
<div class="boxtext"><p>HigherBrother</p></div>
</div>
</div>
</div>
</body>css部分代码
.content {
background-color: lightblue;
width: 900px;
padding: 20px;
text-align: center;
}
.Sbox {
background-color: white;
display: inline-block;
width: 200px;
height: 140px;
padding: 10px 0px;
font-size: 14px;
margin: 0px;
}可以看到虽然设置了各个盒子之间的间距为0px，但是在浏览器中显示出来依然有间距，打开控制台审查元素也显示没有东西占据了宽度啊，这是什么问题呢？难道是浏览器问题？然而其实浏览器并没有问题，有问题的只是我们的代码！！！
在html中，我们每个div之间有缩进，这里的缩进，其实就是空格或者回车，是一个字符！！！浏览器会认为你在每个div直接加了一个空格，所以即使你的margin为0，但是它中间依旧有间隔，所以就会出现上图的情况。
那应该怎么办呢？难道是去掉缩进？我们不可以不要缩进啊，那样代码可读性就太差了，那应该怎么解决这个问题呢？其实很简单，我们在 .content 中加上这样一个样式
.content {
background-color: lightblue;
width: 900px;
padding: 20px;
text-align: center;
font-size: 0px;
}打开浏览器，就可以发现，它就已经合并在一起了，因为我们把字体大小设置为了0px，也就不再占据宽度了。
文章来源网络，作者：管理，如若转载，请注明出处：https://shuyeidc.com/wp/114940.html<
