inline-block元素间4px间隙源于HTML换行被解析为空格节点，彻底消除需：父容器设font-size: 0并重置子元素字号；或改用display: flex+gap；或HTML注释隔断标签。
inline-block 元素间 4px 间隙怎么彻底消除
这个“忽大忽小”的间隙，八成是 display: inline-block 元素在源码中换行或留空格导致的。浏览器把换行符当空格，再按父容器当前 font-size 渲染成约 4px 宽的空白——所以你改了字号，间隙就跟着变。
真正可靠的做法不是“调小它”，而是不让它出现：
- 给父容器设
font-size: 0，子元素再单独设回需要的font-size（注意：input、textarea 等表单控件内部 placeholder 文字可能受影响，需额外重置） - 用 HTML 注释隔断标签：
- 直接改布局方式：父容器用
display: flex，间隙统一用gap控制，完全绕过源码空白问题
为什么 margin/padding 值设成 px 后看起来“不稳”
固定像素值本身不会忽大忽小，但它的视觉占比会随上下文变化。比如 margin: 8px 在小屏手机上占视口比例高，在桌面端就显得稀疏；又或者父容器用了 transform: scale(0.9)，所有 px 值都会被缩放。
更隐蔽的问题是继承链断裂：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
line-height: 20px和font-size: 14px组合时，若子元素font-size变成 16px，行高却仍是 20px，文字就可能挤在一起 - 推荐用无单位
line-height: 1.5，它会乘以当前font-size动态计算 - 间距类属性优先用
rem或em，比如margin-bottom: 1.2rem，随根字体缩放保持比例
gap 属性设了为啥没生效
gap 只对 display: flex 或 display: grid 容器有效，写在普通 div 或 span 上完全被忽略。常见失效场景：
- 只给子元素加
display: flex，忘了父容器才是布局上下文 —— 必须是父容器设display: flex，再在其上写gap: 12px - 用了
flex-wrap: wrap却没限制单行，小屏下子项折行，gap仍作用于每行内部，但行与行之间靠margin或row-gap控制 - IE 浏览器不支持
gap，若需兼容，得降级为margin+:first-child/:last-child排除首尾
表格里 cell 间距总对不准
cellspacing 和 cellpadding 是 HTML5 废弃属性，不能写在 td 上，且无法分别控制横向/纵向。实际渲染中，它只在 border-collapse: separate 模式下起作用，而默认是 collapse。
现代写法更可控：
- 要分隔单元格：设
table { border-collapse: separate; border-spacing: 8px 4px; }（横向 8px，纵向 4px） - 要微调内容离边距离：用
td, th { padding: 6px 10px; }，可单独给th加更大值 - 要无缝？用
border-collapse: collapse，此时border-spacing失效，所有空隙都靠padding控制
最易被忽略的一点：空格问题从来不是“怎么多打几个空格”，而是“哪个 CSS 层级该负责哪段空白”。一旦混淆 margin、padding、gap、line-height 的职责边界，尺寸就必然失控。
