img底部缝隙源于baseline对齐，非margin/padding所致；水平缝隙则由HTML换行与空格解析为字符引起。垂直缝隙用vertical-align:top或display:block解决，水平缝隙推荐flex+gap或font-size:0（需重设子元素字号）。
img 底部缝隙是 baseline 对齐导致的，不是 margin 或 padding
浏览器把 margin-bottom: 0 或 padding-bottom: 0 完全无效。
常见错误现象包括：
- 给
border或outline后，明显看到图片没贴底 - 和文字混排时，图片“浮”在文字上方，视觉错位
- 用
text-align: center居中后，底部仍有细缝
推荐做法：
-
vertical-align: top：最轻量，保留内联行为，适合图文混排场景；middle和bottom在响应式缩放时可能微偏，不推荐作为默认值 -
display: block：彻底脱离行内布局，根除基线干扰；副作用是独占一行，若需水平排列，得配合flex或float重组织 - 避免全局写
img { vertical-align: top }，优先加类名控制，比如.card-img { vertical-align: top }
图片之间水平缝隙来自 HTML 换行与空格
相邻 margin 没生效，而是源码里看不见的空白符在起作用。
可行方案对比：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
font-size: 0在父容器上：简单有效，但必须单独给子元素（如有文字）恢复font-size，否则内容不可见 - 删掉所有换行与空格：写成
-
letter-spacing: -4px或word-spacing: -4px：兼容性差，且会影响所有子文本，慎用 -
display: flex; gap: 8px：现代首选，天然规避空白符问题，间隙均分可控；老版 Safari 不支持gap？可用@supports (gap: 1rem)降级
别踩这些坑：font-size: 0 / line-height: 0 / overflow: hidden
这些看似能“压掉”缝隙的写法，实际埋了隐患：
-
font-size: 0写在 body 或全局容器上：会干掉所有后代文本，必须逐个重设字号，维护成本陡增 -
line-height: 0：影响行高继承，可能导致按钮文字被截断、表单控件错位等连锁问题 -
overflow: hidden配合固定高度：只是裁剪掉缝隙，并非消除；图片尺寸变化、加 transition 或换图时，缝隙可能突然重现 -
margin-bottom: -4px类负外边距：响应式断点切换时，字体缩放会让空隙宽度变化，负值立刻失效
复杂点在于混合场景：图文混排 + 多图网格 + 响应式
单一方案很难通吃。比如卡片布局中，主图要 display: block 贴底，但右上角小图标又要和文字同行，就得用 vertical-align: top；多图网格若需换行，flex-wrap: wrap + gap 比手动调 margin 可靠得多；而移动端图片宽度用 100vw 时，还得注意视口缩放是否触发基线重计算。
真正关键的是分清：缝隙是垂直方向（baseline）还是水平方向（HTML 空白符），再选对应解法。混用 display: block 和 vertical-align 是无效的——后者只对 inline/inline-block 生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
