解决img和div高度不同的问题（img额外产生的高度）

最新推荐文章于 2022-12-08 15:49:33 发布

oneheart初心

最新推荐文章于 2022-12-08 15:49:33 发布

阅读量2.2k

点赞数 2

分类专栏：兼容和优化 CSS 文章标签： css html html5 js javascript

本文链接：https://blog.csdn.net/qq_34466755/article/details/111411986

版权

CSS 同时被 2 个专栏收录

7 篇文章 2 订阅

订阅专栏

兼容和优化

1 篇文章 0 订阅

订阅专栏

问题：img在div中会在底部产生额外的空隙

<body>
  <style>
    div {
      color: #fff;
      background-color: blue;
    }
    img {
      background-color: #fff;
    }
  </style>
  <div class="content">
    <img class="img" src="../../images/nature-1.jpg" width="200px" height="200px" alt="">
  </div>
</body>

div与img高度不一致
解决方案：

1.将图片设为块级元素

img {display: block;}

将图片设为块级元素

缺点：img无法作为行内元素显示

将div字体大小设置为0

div{font-size:0;}
缺点:div内部无法显示文字

将div字体大小设置为0

3.将图片的对齐方式设为bottom（推荐）

img{vertical-align:bottom;}

当div中有其他行内元素时仍然可以正常显示

<body>
  <style>
    div {
      color: #fff;
      background-color: blue;
    }

    img {
      background-color: #fff;
      vertical-align: bottom;
    }
  </style>
  <div class="content">
    <img class="img" src="../../images/nature-1.jpg" width="200px" height="200px" alt="">
    <span>this is a text</span>
  </div>
</body>

.将图片的对齐方式设为bottom

oneheart初心

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
解决img和div高度不同的问题（img额外产生的高度）

问题：img在div中会在底部产生额外的空隙<style> div { color: #fff; background-color: blue; } img { background-color: #fff; }</style><body> <div class="content"> <img class="img" src="../../images/nature-1
复制链接

扫一扫

专栏目录