解决 img 5px 间距的问题

最新推荐文章于 2022-08-24 14:02:58 发布

只是六号z

最新推荐文章于 2022-08-24 14:02:58 发布

阅读量757

点赞数

分类专栏：前端文章标签： css css3 html

赵小奥的专属文章

本文链接：https://blog.csdn.net/z318913/article/details/125182665

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

解决 img 5px 间距的问题

前言
一、img存在5px问题
二、解决方法（四种）

前言

在css的使用中，如果我们将img放置在div中，这时就会出现div的底部存在一个5px的间距，这会是我们的样式显得不融洽。所以我今天就记录一下这个问题该如何解决。

一、img存在5px问题

如下示例代码，我们将图片放置在一个div中。
index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>清除图片多5px问题</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <div class="img-container">
            <img src="../image/1.jpg" alt="">
        </div>
    </body>
</html>

给定的样式如下：
index.css

*{
    margin: 0;
    padding: 0;
}
.img-container{
	/*设置盒子背景颜色*/
    background-color: lightblue;
}
img{
	/*设置图片高度，宽度*/
    height: 700px;
    width: 100%;
}

运行结果：
在这里插入图片描述
可以看到，图片下方出现了一点绿色的间距，虽然很小，但是仔细看还是能够看到的。
下面我们就去解决这个问题。

二、解决方法（四种）

1.设置父元素字体大小为 0

关键代码：

.img-container{
    background-color: lightblue;
   	font-size: 0; 
}

2.将 img 元素设置为 display: block

关键代码：

img{
    height: 700px;
    width: 100%;
    display: block;
}

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

关键代码：

img{
    height: 700px;
    width: 100%;
    vertical-align: bottom;
}

4.给父元素设置 line-height: 5px

关键代码：

.img-container{
    background-color: lightblue;
    line-height: 5px; 
}

只是六号z

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录