img底部空白间隙的问题

uu盘

于 2022-03-22 20:04:20 发布

阅读量317

点赞数

分类专栏： css 文章标签： img底部空白间隙问题

本文链接：https://blog.csdn.net/m0_51328823/article/details/123668871

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

img底部空白间隙的问题

先看代码：

<!DOCTYPE html>
<html lang="zhCn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: green;
        }
    </style>
</head>
<body>
    <div>
        <img src="./女.PNG" alt="">
    </div>
</body>
</html>

在这里插入图片描述
我们可以看到图片和div之间有缝隙，这是因为img元素默认样式导致，因为行内元素默认的垂直对齐方式：基准线baseline
如果没有字，img就不需要对基准线，但是我们即使没有输出文字，也会默认按照有文字的方式去处理。

解决方案

方案一：

既然img默认是对准基线，那我们就更改img的基线的位置，让img的基线对准bottom/top即可。

img {
	vertical-align: bottom/top;
}

方案二：

我们让img的父容器里面字母烟消云散

div {
	background-color: green;
	// 字体大小为0
	font-size: 0;
}

或者

div {
	background-color: green;
	// 行高为0
	line-height: 0;
}

方案三：

将img设置成块元素

img {
	display: block;
}

或者

div {
	background-color: green;
	overflow: hidden;
}
img {
	// 会影响布局
	float: left/right;
}

或者，给img父盒子设置成弹性盒子

div {
	background-color: green;
	display: flex;
}

在这里插入图片描述

uu盘

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
img底部空白间隙的问题

img底部空白间隙的问题先看代码：<!DOCTYPE html><html lang="zhCn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
复制链接

扫一扫

专栏目录