css如何解决图片底部空白缝隙问题

朱雀 2020-04-28 06:28 987阅读 0赞

css如何解决图片底部空白缝隙问题

问题描述：

引用图片时下方总出现空白，情况如下图所示。

css代码：

  1. <style>
  2.     .img-box {
  3.         border: 2px solid red;
  4.         width: 550px;
  5.     }
  6. </style>
  7. <div class="img-box">
  8.     <img src="./img.png" alt="">
  9. </div>

原因分析：

行内块元素会和文字的基线对齐。

解决方法：

1、给图片添加 vertical-align: middle | top | bottom 等。（推荐使用）

  1. img {
  2.     vertical-align: bottom;
  3. }

2、把图片转换为块级元素 display: block; （转换块级元素可能会影响你的布局，所以推荐使用第一种）

  1. g {
  2.     display: block;
  3. }

发表评论

表情：
评论列表 （有 0 条评论，987人围观）

还没有评论，来说两句吧...

相关阅读