关于在html中换行引起的空格问题及解决
2020-05-16 本文已影响0人
王兴岭
我在最近写html的时候，经常会碰到标签的换行，或者是内容的换行，在界面中是会出现空格的间隙。如：
<body>
<div>
<span>123</span><span>456</span>
</div>
<div>
<span>123</span>
<span>456</span>
</div>
</body>
页面显示会出现空格
image.png
解决方法：
1在父标签上设置font-size：0px; 然后单独给子标签设置字体大小就能解决这个问题了。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div {
font-size: 0px;
}
span {
font-size: 14px;
}
</style>
</head>
<body>
<div>
<span>123</span><span>456</span>
</div>
<div>
<span>123</span>
<span>456</span>
</div>
</body>
效果：
image.png
2 把换行去掉或者用注释风格两行, 牺牲了可读性
<body>
<div>
<span>123</span><span>456</span>
</div>
<div>
<span>123</span><!--
--><span>456</span>
</div>
</body>
image.png
