块级标签包含行内标签底部出现3px间隔的解决办法

最新推荐文章于 2024-04-03 16:26:02 发布

转载最新推荐文章于 2024-04-03 16:26:02 发布 · 387 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/hellobajie/p/5800029.html

收录于

当前文章被以下社区和专栏收录：

本文探讨了HTML中块级标签包含行内标签时出现的3px底部间隔问题，并提供了三种解决方案：设置外层标签字体大小为0、将内层图片标签转换为块级显示或者调整垂直对齐方式。

当块级标签（如div）内包含了行内标签（如img），则外层元素与内层元素底部会出现3px的间隔；

代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            background: red;
        }
    </style>
</head>
<body>
    <div id='box'>
        <img src="test.png">
    </div>
</body>
</html>