inline-block元素间间隙源于换行符解析为空白字符，最稳方案是父容器设display: flex；textarea底部空白因vertical-align: baseline预留descender空间，应设display: block或vertical-align: top；table缝隙需检查border-collapse、内部margin及border-spacing；段落间距由margin合并导致，非line-height问题。
inline-block 元素间换行导致的间隙怎么清
HTML 中写成多行的 display: inline-block 元素（比如 <div>、<code><li> 或自定义按钮），浏览器会把换行符和缩进空格解析为一个空白字符，渲染成约 4px 的横向/纵向间隙——这不是 margin，删 margin 没用。
- 最稳方案是改布局：父容器加
display: flex，子元素自动贴紧，无需处理空白 - 若必须保留 inline-block，可在父容器设
font-size: 0，再给子元素单独设font-size（注意继承影响） - 用注释节点连接元素也能消除间隙：
<div></div> <!-- --><div></div> - 负 margin 可临时掩盖，但值依赖字体大小（如
margin-left: -0.25em），响应式下易失效
textarea 底部莫名多出一段空白怎么办
<textarea></textarea> 默认是 inline-level 可替换元素，按 vertical-align: baseline 对齐，下方预留 descender 空间，造成“看不见的纵向间隙”——哪怕你清了 margin 和 padding，它还在。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 首选方案：直接设
display: block，彻底脱离行内流，间隙消失且语义合理 - 需保持行内对齐时，用
vertical-align: top或middle，同时建议配line-height: 1防字体度量干扰 - 别硬写
height去盖住间隙，会破坏可访问性、拖拽调整和响应式表现
table 单元格之间还有缝？border-collapse 不是万能药
只写 border-collapse: collapse 还可能看到细缝，原因常被忽略：一是 <td> 内部嵌套的 <code>p、h3 自带默认 margin，撑开单元格高度；二是某些框架（如 Bootstrap 5）悄悄加了 border-spacing: 0 1px。
- 确认
border-collapse: collapse作用在<table> 标签上，不是 <code><tr> 或 <code><td><li>检查 <code><td> 内部块级元素是否带 margin，可统一用 <code>td > * { margin: 0; }清理 - 用开发者工具的 Computed 面板看实际生效的
border-spacing值，覆盖掉第三方样式 - 如果用了
outline或box-shadow，它们也会模拟出“伪缝隙”，一并排查 - 统一控制用
p { margin-bottom: 1.2rem; }，再用p:first-child { margin-top: 0; }和p:last-child { margin-bottom: 0; }收尾 - 避免全局写
p { margin: 0; }，容易因 margin 合并导致首尾意外塌陷 - gap 只在
flex或grid容器中生效，且不兼容 IE，别指望它替代 margin
段落之间空太多，别乱调 line-height
连续多个 <p></p> 出现纵向间隙，99% 是浏览器默认给的 margin-bottom 和 margin-top 合并所致。有人误调 line-height，结果只是让段内文字挤在一起，段间距纹丝不动。
立即学习“前端免费学习笔记（深入）”；
真正难缠的间隙，往往藏在「默认样式 + 继承 + 浏览器差异」的组合里。动手前先打开开发者工具，盯着 Computed 样式看真实生效值，比猜更省时间。
