font-size:0的妙用

最新推荐文章于 2024-11-01 00:19:04 发布

原创最新推荐文章于 2024-11-01 00:19:04 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

WEB开发专栏收录该内容

23 篇文章

订阅专栏

本文探讨了HTML和CSS中出现空白间距的原因及解决方法。通过设置父级元素的font-size为0来消除子元素间的空白间距，同时保持排版的整洁。

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>