问题：为什么< li >标签在渲染的时候，即使不写 padding 或 margin，还是有空隙？
下面我们将块元素横排。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>li标签的间隙问题</title>
<link rel="stylesheet" type="text/css" href="./new_file.css"/>
</head>
<body>
<div class="wrap">
<ul>
<li class="part1"></li>
<li class="part2"></li>
<li class="part3"></li>
</ul>
</div>
</body>
</html>body {
width:100%;
}
.wrap {
width:600px;margin:0 auto;
}
.wrap li {
width:30%; height: 150px;display:inline-block; /* 行内块元素 */
}
.part1 {
background-color: #6495ED;
}
.part2 {
background-color: #DC143C;
}
.part3 {
background-color: black;
}可以很明显的看到块之间的间隙
原因应该是：浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格
下面是解决方法:
1.将< li >代码全部写在一排
<li class="part1"></li><li class="part2"></li><li class="part3"></li>2.将< li >标签之间用注释填补
<li class="part1"></li><!--
--><li class="part2"></li><!--
--><li class="part3"></li>3.为了代码美观，我们可以将< ul >内的字符尺寸直接设为0
.wrap ul{
font-size:0px;
}但是同时要设置< li >标签的 font-size属性。
.wrap ul li{
letter-spacing: normal;
}
扫一扫
216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
