首页 > 技术文章 > css解决内联元素间的空白间隔

sunshine21 2019-04-11 20:22 原文

在内联元素的父级元素上设置font-size: 0px;即可。例如:

<div class="wrap">
	<ul>
		<li class="part1">1</li>
		<li class="part2">2</li>
		<li class="part3">3</li>
		<li class="part4">4</li>
	</ul>
</div>

*{
	margin:0;
	padding:0;
}
html, body {
	width: 100%;
	height: 100%;
}
ul li {
	list-style: none;
}
.wrap {
	width: 600px;
	margin: 0 auto;
	margin-top: 100px;
}
.wrap ul {
	font-size: 0px;
}
.wrap li {
	width: 25%;
	height: 150px;
	display: inline-block;
}
.part1 {
	background: red;
}
.part2 {
	background: green;
}
.part3 {
	background: pink;
}
.part4 {
	background: tomato;
}

推荐阅读