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 元素（比如

、

或自定义按钮），浏览器会把换行符和缩进空格解析为一个空白字符，渲染成约 4px 的横向/纵向间隙——这不是 margin，删 margin 没用。

• 最稳方案是改布局：父容器加 display: flex，子元素自动贴紧，无需处理空白
• 若必须保留 inline-block，可在父容器设 font-size: 0，再给子元素单独设 font-size（注意继承影响）
• 用注释节点连接元素也能消除间隙：
• 负 margin 可临时掩盖，但值依赖字体大小（如 margin-left: -0.25em），响应式下易失效

textarea 底部莫名多出一段空白怎么办

默认是 inline-level 可替换元素，按 vertical-align: baseline 对齐，下方预留 descender 空间，造成“看不见的纵向间隙”——哪怕你清了 margin 和 padding，它还在。

• 首选方案：直接设 display: block，彻底脱离行内流，间隙消失且语义合理
• 需保持行内对齐时，用 vertical-align: top 或 middle，同时建议配 line-height: 1 防字体度量干扰
• 别硬写 height 去盖住间隙，会破坏可访问性、拖拽调整和响应式表现

table 单元格之间还有缝？border-collapse 不是万能药

只写 border-collapse: collapse 还可能看到细缝，原因常被忽略：一是 内部嵌套的 p、h3 自带默认 margin，撑开单元格高度；二是某些框架（如 Bootstrap 5）悄悄加了 border-spacing: 0 1px。

• 确认 border-collapse: collapse 作用在 标签上，不是 或

  检查

  内部块级元素是否带 margin，可统一用 td > * { margin: 0; } 清理 用开发者工具的 Computed 面板看实际生效的 border-spacing 值，覆盖掉第三方样式 如果用了 outline 或 box-shadow，它们也会模拟出“伪缝隙”，一并排查 段落之间空太多，别乱调 line-height 连续多个 DeepBI DHTML 页面生成器 生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur 下载 出现纵向间隙，99% 是浏览器默认给的 margin-bottom 和 margin-top 合并所致。有人误调 line-height，结果只是让段内文字挤在一起，段间距纹丝不动。 统一控制用 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 真正难缠的间隙，往往藏在「默认样式 + 继承 + 浏览器差异」的组合里。动手前先打开开发者工具，盯着 Computed 样式看真实生效值，比猜更省时间。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！