【css笔记】图片底部空白间隙解决方案

最新推荐文章于 2023-12-31 23:05:38 发布

一颗甜橙树

最新推荐文章于 2023-12-31 23:05:38 发布

阅读量552

点赞数

分类专栏： Css

本文链接：https://blog.csdn.net/kikikiuu/article/details/108504746

版权

Css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

图片底部会有空白间隙，原因是行内块元素（这里指图片元素）会和文字的基线对齐
那么可能有人会好奇文字基线是什么？下面我和大家来进行解答

在这里插入图片描述
可以看到上面的图片和字母的对齐方式，他们对齐的线就是叫做文字基线

那如果我只有图片，看到底部的空白间隙，强迫症觉得很难受，我们要怎么去解决呢？
在这里插入图片描述

解决方法有以下两种：
1.给图片添加vertical-align:middle/top/bottom等
2.把图片转换成块级元素display：block;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片底侧空白缝隙解决方案</title>
    <style>
        div {
            border: 2px solid red;
        }
        img {
             /* vertical-align: middle; */
            display: block; 
        }
    </style>
</head>
<body>
    <div>
        <img src="images/ldh.jpg" alt="">
    </div> 
</body>
</html>

解决
在这里插入图片描述

一颗甜橙树

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【css笔记】图片底部空白间隙解决方案

图片底部会有空白间隙，原因是行内块元素（这里指图片元素）会和文字的基线对齐那么可能有人会好奇文字基线是什么？下面我和大家来进行解答可以看到上面的图片和字母的对齐方式，他们对齐的线就是叫做文字基线那如果我只有图片，看到底部的空白间隙，强迫症觉得很难受，我们要怎么去解决呢？解决方法有以下两种：1.给图片添加vertical-align:middle/top/bottom等2.把图片转换成块级元素display：block;<!DOCTYPE html><html lan.
复制链接

扫一扫