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

学习委员

关注

发布于: 2021 年 01 月 15 日

问题

html 代码：

<style>* {  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;}</style>
<body>  <header>header</header>  <div class="banner">    /* 插入一张banner图片 */    <img src="images/banner4.jpg" alt="banner">  </div>  <section>section</section></body>

复制代码

分析

首先要知道产生这部分空白区域的原理。

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

解决方法

方法 1：

<style>  img {    display: block;  }</style>

复制代码

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

方法 2：

<style>  img {    vertical-align: middle;	}</style>

复制代码

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

方法 3：

<style>  img {    margin-bottom: -4px;  }</style>

复制代码

把 img 元素的底部外边距改成负值，同样可以实现去留白的效果。

这里修改的值的大小，会影响整个页面的布局。

修改的足够小（比如-100px），图片的留白部分就会消失，但是 img 之后的元素会被动上移，且会藏在 img 标签的下面。甚至一不小心就很容易把 img 后面的内容网上移得太多，导致内容显示不全。

如下图所示：

其中，section 里面的内容也会被覆盖一部分。

所以我这个案例修改成-4 就 ok 了。

因为这个方法可能会导致出现一些意想不到的事情，所以不建议用这个方法。

方法 4：

<style>  .banner {    font-size: 0;	}</style>

复制代码

由上面的分析得到，出现留白的原因是因为垂直对齐的方式所导致的，所以可以修改父元素的 font-size，把父元素的字体大小改为 0，所以就没什么垂直对齐所言咯。

要注意的是：这个修改会影响 class="banner" 这个元素里面的字体（因为字体属性能继承）。

同时需要注意的是：font-size 要放在 img 的父元素里，不能直接放在 img 样式里面。

方法 5：

<style>  .banner {    line-height: 0;	}</style>

复制代码

把 img 的父元素行高设成 0，这样也就没什么垂直对齐所言。

需要注意的点和方法 4 所需注意的点差不多。

发布于: 2021 年 01 月 15 日阅读数: 32

学习委员

关注

反派 2019.03.19 加入

哈哈哈哈哈哈哈哈哈哈哈哈哈哈

发布

暂无评论

创作场景

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

问题

分析

解决方法

方法 1：

方法 2：

方法 3：

方法 4：

方法 5：

学习委员

评论