[CSS]关于<img>标签距离底部盒子5px的问题

 

问题描述：在某个盒子内部放入一个<img>标签，不写样式的情况下，<img>总是和父盒子有5px空隙。

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>清除图片多5px问题</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .img-container{
            /*设置盒子背景颜色*/
            background-color: lightblue;
        }
        img{
            /*设置图片高度，宽度*/
            height: 700px;
            width: 100%;
        }
    </style>
    <body>
        <div class="img-container">
            <img src="../image/1.jpg" alt="">
        </div>
    </body>
</html>
复制代码

 

解决方案有4种：

1. 设置父元素 font-size: 0;

    缺点：父元素内如果需要写文字，会有问题。

2. 设置父元素 line-height: 5px;

    缺点：同1。

3. 将 img 元素设置为 vertical-align: bottom;

    缺点：如果父元素display: flex; 则 img 元素中的 vertical-align 属性修改无法生效。

4. 将 img 元素设置为 display: block;

    暂未发现缺点，建议使用。√

 

posted @   夕苜19  阅读(39)  评论(0)  编辑  收藏  举报
相关博文：
· [CSS]背景图片很大，根据屏幕缩小适配后，div之间有空隙的问题
· [CSS]一行文字超出部分隐藏+图片居中
· 图片被盒子包着，div底部有空隙问题
· 解决img标签之间的间隙
· img 标签高度多了几个像素
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛