【CSS面试题】图片底侧空白缝隙解决方案

最新推荐文章于 2024-12-11 23:24:11 发布

纵有千堆雪与长街

最新推荐文章于 2024-12-11 23:24:11 发布

阅读量403

点赞数

CC 4.0 BY-SA版权

分类专栏： css面试题文章标签： css javascript 前端

21 篇文章

订阅专栏

本文介绍如何修复网页中插入图片时出现的白色缝隙问题，通过CSS的vertical-align属性和将图片转换为块级元素来实现对齐，同时探讨了可能导致缝隙的浏览器默认样式调整。

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

在这里插入图片描述

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

<style>
       div {
           border: 2px solid red;
       }
       
       div img {
           vertical-align: middle;
       }
   </style>

在这里插入图片描述

<style>
      div {
          border: 2px solid red;
      }
      
      div img {
          vertical-align: middle;
      }
  </style>

在这里插入图片描述

注：有的左侧或者上侧也出现白色缝隙
可能的原因：部分浏览器的默认页边距与填充方法不是0，因此，需要在CSS的body里添加body{ margin:0;padding:0;}