font-size等于0是解决什么问题

最新推荐文章于 2025-10-11 19:00:59 发布

原创最新推荐文章于 2025-10-11 19:00:59 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

22 篇文章

订阅专栏

本文探讨了在HTML中展示图片时出现的间隙问题，并提供了解决方案。通过调整父级元素的font-size属性为0，可以有效消除由空行引起的图片间不必要的空白。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内块元素的问题</title>

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }

        img{
            width: 300px;
            vertical-align: top;  
            border: 5px solid orange;
            border-radius:10px;
            box-shadow: 10px 10px 5px #888888;
        }
    </style>
</head>
 
<body  >  

    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554458794&di=715dde0bd360821cfa86d9dd12256fc4&imgtype=jpg&er=1&src=http%3A%2F%2Fi1.img.969g.com%2Fxy2%2Fimgx2011%2F06%2F07%2F143_124535_76cf5.jpg">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554458794&di=715dde0bd360821cfa86d9dd12256fc4&imgtype=jpg&er=1&src=http%3A%2F%2Fi1.img.969g.com%2Fxy2%2Fimgx2011%2F06%2F07%2F143_124535_76cf5.jpg">

</body>
</html>