行内块元素的间隙解决办法

最新推荐文章于 2023-09-17 18:45:59 发布

如果可以，可以如果

最新推荐文章于 2023-09-17 18:45:59 发布

阅读量3.2k

点赞数 8

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_43687594/article/details/123401510

版权

在默认情况下，行内块元素（例如img、input）都存在间隙问题，例如说div中不写宽高的时候，给了个粉色的背景色，方便能看出div和图片之间的间隙，这时嵌套一个img，由图片撑开div，这时会明显的看到div与图片在下面有一些间距。
在这里插入图片描述

解决下边距的几个办法：

逃避间距问题，直接强制性给父元素div设置一个和图片一样的宽高，不过不推荐，一般情况下盒子里不可能单单只有一个图片。
给父元素设置font-size为0px，不过也不推荐，毕竟谁能保证父元素中没有文字呢，对吧
给img除了vertical-align的默认值baselin之外，设置vertical-align：top/middle/bottom;三属性值之一都可以解决这个下边距问题，这个属性是解决行内块元素的基线对齐问题的，所以在使用的时候，要设置哪个值可以取决于父元素中其他内容的对齐方式。
行内块元素具有这个间隙问题，但是块元素与块元素之间不存在，根据这个原理，我们可以把行内块元素通过转换元素类型的方法来解决这个问题，也就是说给img添加display：block；这会导致图片直接具有块元素的特征，视情况而定使用。

解决左右间距办法：

两个盒子之间的空隙我们称之为盒模型中的margin值，行内块左右之间的间隙存在，我们可以看做是两个盒子之间的margin值，在页面中显示的行内块之间没有margin值，但是却存在间隙，这时我们就可以利用margin可以为负值来解决问题，一般给图片设置margin-left或者margin-right为-5px就可以解决问题。
直接给img都加上浮动float。

代码展示其中的一种方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: pink;
        }
        img{
            /* 解决图片下间距的问题 */
            vertical-align: top;
            /* 解决左右之间的间隙问题 */
            margin-left: -5px;
            margin-right: -5px;
        }
    </style>
</head>
<body>
    <div>
        <img src="https://img2.baidu.com/it/u=15583089,3586848671&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200" alt="">
        <img src="https://img1.baidu.com/it/u=2230143160,1715126551&fm=15&fmt=auto" alt="">
        <img src="https://img1.baidu.com/it/u=2230143160,1715126551&fm=15&fmt=auto" alt="">
    </div>
    
</body>
</html>

最终效果图：
在这里插入图片描述

如果可以，可以如果

关注

8
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
行内块元素的间隙解决办法

在默认情况下，行内块元素（例如img、input）都存在间隙问题，例如说div中不写宽高的时候，给了个粉色的背景色，方便能看出div和图片之间的间隙，这时嵌套一个img，由图片撑开div，这时会明显的看到div与图片在下面有一些间距。解决下边距的几个办法：逃避间距问题，直接强制性给父元素div设置一个和图片一样的宽高，不过不推荐，一般情况下盒子里不可能单单只有一个图片。给父元素设置font-size为0px，不过也不推荐，毕竟谁能保证父元素中没有文字呢，对吧给img除了vertical-alig
复制链接

扫一扫