当前位置：网站首页>解决 img 5px 间距的问题

解决 img 5px 间距的问题

2022-06-11 20:54:00 【只是六号z】

解决 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]所创，转载请带上原文链接，感谢
https://blog.csdn.net/z318913/article/details/125182665

边栏推荐

猜你喜欢

随机推荐