如何移除inline-block复选框之间不受控制的垂直边距

空白来源 #

inline/inline-block元素默认采用baseline（基线）对齐规则，浏览器为了容纳行内可能存在的文本下行字符（如g、p、y的下沉部分），会默认给行框保留对应行高的额外空间。即便当前行内没有文本内容，这个由行高和基线对齐带来的垂直间隙也会保留，这就是你看到的无法通过margin消除的垂直空白。

解决方案 #

你可以根据业务场景任选以下一种方案：

• 方案1：调整对齐规则+重置行高
  给复选框覆盖垂直对齐属性，同时给父容器设置行高为0彻底消除额外空间，完全保留inline排列的特性：

  div {
    line-height: 0;
  }
  input[type=checkbox] {
    display: inline-block;
    margin: 0;
    vertical-align: top; /* 可替换为bottom/middle，只要不是默认baseline即可 */
  }
  

• 方案2：使用Flex布局（无侵入，更易维护）
  给每行的父容器设置flex布局，天然消除行内元素的默认间隙：

  div {
    display: flex;
  }
  input[type=checkbox] {
    margin: 0;
  }
  

内容的提问来源于stack exchange，提问作者Basti