解决div里面img图片下方有空白的问题

今天药忘吃喽~ 2022-04-27 21:16 273阅读 0赞

在开发的过程中，我发现插入一张图片后，下面想紧跟着一个带背景色的div，不管我怎么折腾他都有一条白边。后来研究了一下发现自己对img标签了解的真不够深入。

![Image 1][]

image.png

**html代码：**

<body>
        <header>header</header>
        <div class="banner">
          /* 插入一张banner图片 */
          <img src="images/banner4.jpg" alt="banner">
        </div>
        <section>section</section>
    </body>

**CSS代码**

* {
        margin: 0;
        padding: 0;
    }
    header, .banner, section {
        width: 100%;
    }
    header {
        height: 76px;
        position: fixed;
        background: rgba(255, 204, 0, 1);
    }
    .banner {
        background: pink;
    }
    .banner img {
        width: 100%;
    }
    section {
        height: 300px;
        background: #00B3FF;
    }

> 首先要知道产生这部分空白区域的原理。  
> 图片的display属性默认是inline（我学习的时候是这样说的，不知道有没有上了堂假课），而这个属性的vertical-align的默认值是baseline。所以就会出现上图的情况（图片底部出现一个小留白区域）。

**解决方法：**  
  
  
方法1：

img {
        display: block;
    }

把img变成块状元素，所以是否需要留白，可以用过padding来设置。

方法2：

img {
        vertical-align: middle;
    }

既然分析到img的vertical-align默认属性导致出现留白问题，所以直接修改vertical-align属性值就行咯。

方法3：

img {
        margin-bottom: -4px;
    }

把img元素的底部外边距改成负值，同样可以实现去留白的效果。  
这里修改的值的大小，会影响整个页面的布局。  
修改的足够小（比如-100px），图片的留白部分就会消失，但是img之后的元素会被动上移，且会藏在img标签的下面。甚至一不小心就很容易把img后面的内容网上移得太多，导致内容显示不全。  
如下图所示：

![Image 1][]

image.png

其中，section里面的内容也会被覆盖一部分。  
所以我这个案例修改成-4就ok了。  
因为这个方法可能会导致出现一些意想不到的事情，所以不建议用这个方法。

方法4：

.banner {
        font-size: 0;
    }

由上面的分析得到，出现留白的原因是因为垂直对齐的方式所导致的，所以可以修改父元素的font-size，把父元素的字体大小改为0，所以就没什么垂直对齐所言咯。  
要注意的是：这个修改会影响class="banner"这个元素里面的字体（因为字体属性能继承）。  
同时需要注意的是：font-size要放在img的父元素里，不能直接放在img样式里面。

方法5：

.banner {
        line-height: 0;
    }

把img的父元素行高设成0，这样也就没什么垂直对齐所言。  
需要注意的点和方法4所需注意的点差不多。

我会把日常学到的东西，或者一些个人的开发经验总结起来，希望大家能在我的笔记上得到一些东西。  
如果在阅读的过程中发现我的笔记上一些错误，希望能对我作出点评，谢谢~

作者：Rabbit\_svip  
链接：https://www.jianshu.com/p/2af064692505  
来源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

[Image 1]: