CSS图片底侧空白缝隙解决方案

Frank原创
  • 开发笔记
  • CSS
小于 1 分钟约 220 字...

从下面的案例来看,图片是与文字的基线对齐的。这就是底部缝隙出现的原因

See the Pen by zhangfanhang on CodePen.

方案 1:vertical-align

vertical-align 属性设置元素的垂直对齐方式

属性值

  • baseline:默认值,元素放置在父元素的基线上
  • top:把元素的顶端与行中最高元素的顶端对齐
  • middle:把此元素放置在父元素的中部
  • bottom:把元素的顶端与行中最低的元素的顶端对齐

vertical-align-1

设置除了baseline任一属性均可以解决问题

方案 2:转换为块级元素 display: block

块级元素没有 vertical-align 的属性,不会有基线对齐的方式

上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1