一:原因
原因:
是因为html代码中相隔的标签间有回车,HTML代码中的回车换行被转成一个空白符,在字体不为0的情况下,空白符占据一定宽度,所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化,当元素font-size:16px时,间距为8px
二:解决方案
1、由于回车产生的间隙,去掉回车就好了。但是这样写在一行,代码可读性变低
2、为父元素中设置font-size: 0,在子元素上重置正确的font-size,子元素必须重置字体。
3、元素float:left,但是会有塌陷。
4、设置父元素,display:table
案例一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
background-color: silver;
}
</style>
</head>
<body>
<div class="app">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
运行:
可以看到每个span(行内显示)之间 有间隙
解决:
.app {
display: table;
}
运行:
案例二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
border: 2px solid red;
}
li {
display: inline-block;
height: 200px;
width: 50px;
background-color: pink;
vertical-align: middle;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
运行:
每个li的左右存在间隔
解决:
ul {
border: 2px solid red;
font-size: 0;
}
运行: