label标签下方出现意外空白，如何在不修改HTML结构的前提下消除？

空白产生原因 #

• 黑色方块对应的div被设置为inline-block显示，行内级元素默认vertical-align属性值为baseline，浏览器会为这类元素预留出容纳英文下伸字符（如g、p、y的下沉部分）的底部空间，就形成了你看到的下方空白。

消除方案（无需修改HTML结构，任选其一即可） #

方案1：调整行内块的垂直对齐方式 #

给对应的inline-block元素设置非baseline的对齐规则：

.choice-picker > input + label > * {
  display: inline-block;
  margin: 0em;
  vertical-align: bottom; /* 替换为top/middle也可生效 */
}

方案2：设置父级label行高为0 #

行高为0时基线预留空间会被清除：

.choice-picker label {
  line-height: 0;
}

方案3：将黑色方块改为块级显示 #

如果不需要行内排列的特性，直接修改display属性为block，即可消除行内元素特有的间距问题：

.choice-picker > input + label > * {
  display: block;
  margin: 0em;
}

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