Css样式中设置gap: 12px以后左右出现距离问题解析

原因核心：

虽然写的是：

display: flex;
gap: 12px;

但在实际 DOM 中，这段结构：

<div class="el-form-item__content"><div class="el-input"><input type="text" class="el-input__inner"></div>
</div>

只有 一个子元素：.el-input，按理说 gap 不会生效。但看到“gap 产生左右 12px”，可能是因为：

---

::before 或 ::after 伪元素参与了布局！

某些框架（如 Element-UI）默认会在 el-form-item__content 内部加上隐藏的 ::before 和 ::after，用于清除浮动或对齐。

这些伪元素虽然不可见，但在 display: flex + gap 组合下，会被当作有效的子元素，从而使：

• .el-input 与 ::before 之间 产生 12px 间距
• .el-input 与 ::after 之间 也产生 12px 间距

这就是原因所在！！！！！

---

验证方法：

按下 F12 打开浏览器开发者工具：

1. 选中 .el-form-item__content
2. 查看其子节点是否有 ::before / ::after
3. 你会发现两边的 gap 是因为这两个伪元素引起的

---

解决方法

方式一：清除伪元素对布局的影响（推荐）

.el-form-item__content::before,
.el-form-item__content::after {display: none !important;content: none !important;
}

方式二：只对真正子元素设置 gap，不使用 flex gap

改为用 margin-left：

.el-form-item__content > *:not(:first-child) {margin-left: 12px;
}