去除图片上下左右间隙

发表于 分类于 / Changyan：

情景

当在定宽父容器下有多张图片顺序排列时，图片的上下左右之间都有间隙：

原因

  • 左右：因为 img 是 inline-block 元素，元素代码之间有『换行（回车），空格，tab』时会产生左右间隙。
  • 上下：行内元素默认与父容器基线对齐，而基线与父容器底部有一定间隙，所以上下图片间有间隙。

解决方案

  • 移除上下间隙：
    • img本身设置 display: block;
    • 父元素设置 font-size: 0; （基线与字体大小有关，字体为零，基线间就没距离了）
    • img本身设置 vertical-align: bottom;（让inline-block 的 img 与每行的底部对齐）
  • 移除左右间距：
    • 行内元素间不要有换行，连成一行写消除间隙（阅读性差，不推荐）
    • 第一行img结尾写上 <!-- ，第二行img开头跟上 --> 。即利用注释消除间距
    • 父元素 font-size: 0