font-size:0的妙用

来源：互联网发布：amx cdc数据编辑：程序博客网时间：2024/05/16 05:39

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>

没有设置了font-size:0

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

2.消除空白间距

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

阅读全文

0 0