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

当块级标签(如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>
复制代码

显示效果如下:

解决办法有三种:

  1.设置div{ font-size: 0};将外层块级标签的font-size设置为0;

  2.设置img{ display: block};将内层行内标签的display设置为block,将其变为块级标签;

  3.设置img{ vertical-align:top;};将内层行内标签的vertical-align设置为top;

 

posted @   hello八戒  阅读(1035)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示