为何仅含Input与Label时Flex容器的Gap出现额外间距？

布局场景展示 #

• 输入框+标签：
• 输入框+图标+标签：
• 图标+标签：
• 仅标签：

基础信息说明 #

输入框与标签未设置额外样式或外边距，输入框的CSS如下：

容器采用Flex布局，Gap设置为12px。目前的问题是：仅在输入框与标签共存的布局中出现了额外间距，其他布局均正常。

补充：使用Stencil.js开发，图标是独立组件，嵌套在输入框与标签之间，根据传入的图标名称条件渲染。核心代码如下：

return (
  <a href="javascript:;" class={`dropdown-item ${this.checkboxColor}`}>
    {this.checkable && <input type="checkbox" id="checkbox4" class={`form-check-input`} />}
    <ifx-icon icon={this.icon}></ifx-icon>
    <label htmlFor="checkbox4" class="form-check-label"><slot /></label>
  </a>
)

问题原因分析 #

1. 浏览器默认样式影响：原生复选框(<input type="checkbox">)和关联标签(<label>)之间，浏览器会默认添加间距（比如Chrome等webkit内核浏览器会给复选框加margin-right: 0.3125em）。当中间有图标组件时，图标的存在阻断了这种默认关联的样式影响，或者图标自身的样式抵消了这个间距。
2. Flex基线对齐偏差：复选框是替换元素，标签是行内元素，Flex布局默认按基线对齐，两者的基线差异会导致视觉上出现额外间距。而图标组件作为块级/行内块级元素，会改变整个容器的对齐基准，让间距表现正常。
3. 模板空白字符解析：当图标不渲染时（无图标传入），输入框和标签之间的模板换行、空格会被解析为匿名行内元素，在Flex布局中产生额外空间；有图标时，空白字符被图标组件覆盖，不会产生间距。

解决方法 #

1. 覆盖浏览器默认样式：给复选框添加margin: 0，直接消除默认间距：

.form-check-input {
  margin: 0;
}

2. 调整Flex对齐方式：给容器设置align-items: center，让所有元素居中对齐，避免基线对齐带来的偏差：

.dropdown-item {
  display: flex;
  gap: 12px;
  align-items: center;
}

3. 清除模板空白字符：把输入框、标签的代码写在同一行，或用注释消除换行产生的空白：

{this.checkable && <input type="checkbox" id="checkbox4" class={`form-check-input` />}
{this.icon && <ifx-icon icon={this.icon}></ifx-icon>}<label htmlFor="checkbox4" class="form-check-label"><slot /></label>

4. 修改标签显示类型：给标签设置display: inline-block，避免行内元素的基线问题：

.form-check-label {
  display: inline-block;
}

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