css布局中margin为0，但依然有间距

在进行布局时经常会出现，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，也就不再占据宽度了。

相关推荐：

源码下载