div中放入一个img元素导致div高度会多出3px问题

zeng092210

于 2019-01-23 10:01:53 发布

阅读量511

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签： div包裹img 3px问题 div包裹img 3px问题

本文链接：https://blog.youkuaiyun.com/zeng092210/article/details/86604385

2 篇文章

订阅专栏

本文探讨了在网页布局中，使用div包含img时出现底部黑条的问题，并详细解释了其原因在于img元素默认行为在末尾添加空白符。通过调整CSS属性display为block，成功解决了img无法完全填充div容器的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我的结构如下图，

<div class="main-box">
   <div class="container">
      <img src="./images/icon-content.jpg" alt="">
   </div>

css部分为：

.main-box
,.container
,.main-box img{
  width: 100%;
  height: 100%
}
.main-box{
  position: relative;
}
.main-box img{
  width:100%;
}

预想中应该是div的铺面全屏，img的大小和div一样占满整个屏幕，但结果恰恰是div和img下方有一个黑条大概（3px）导致页面可以上下滑动一点点。如下图：

当然我第一反应可是想padding或margin、border引起的，一顿设置，然而并未卵用。

原因：img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符，所以就会多出3px。

解决办法：解决这个问题的方法也很简单，把img标签的display属性设置为block。

.main-box img{
   width:100%;
   display: block;
}

问题解决