您的位置：首页 > 其它

font-size:0的妙用

2017-10-25 19:33 113 查看

1.为什么要设置font-size：0

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12</title>
<style>
*{
margin:0;
padding:0;
}
.content{
background-color: #ccc;
margin:20px;
/*font-size: 0;*/
}
.title{
display: inline-block;
background-color: #afa;
width:80px;
height:80px;
}
</style>
</head>
<body>
<div class="content">
<div class="title"></div>
<div class="title"></div>
</div>
</body>
</html>




.title类并没有设置任何margin，但是两个div并没有紧紧贴合在一起，这是出于排版的原因两个div之间留下了空白字符，才导致两个div元素之间留有间距

2.消除空白间距

虽然不换行可以暂时解决这一问题，但是肯定有更好的方法。在父类中设置font-size:0就可以完美地解决这个空白间距问题。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航