dialog 的默认边距感源自 margin: 0 auto（水平居中）、padding: 1em 及 ::backdrop 遮罩干扰；需显式重置 dialog { margin: 0; padding: 0; }，通配符无效因其脱离文档流且 UA 样式权重高。
dialog 元素的默认边距来自哪里
dialog 标签在现代浏览器（Chrome 97+、Firefox 99+、Safari 15.4+）中确实有 UA 默认样式，但它的“边距感”通常不是 margin，而是由三部分叠加造成：一是 dialog 自身的 margin: 0 auto（水平居中导致左右留白），二是 padding: 1em（上下左右均有内边距），三是其伪元素 ::backdrop 的半透明遮罩常被误认为“顶部压黑”，实则与边距无关。
直接清除 margin 和 padding 的写法
不要只清 body 或用通配符——dialog 是独立渲染的模态容器，必须显式重置：
-
dialog { margin: 0; padding: 0; }可消除居中留白和内边距 - 若需保留居中但去掉左右空隙，改用
dialog { margin: 0; width: fit-content; } - 注意：Chrome 对
dialog的padding默认是1em，不是像素值；Safari 有时为16px，所以设0最稳妥 - 别漏掉
dialog::backdrop—— 它不带 margin，但若有背景色且未设background-color: transparent，会干扰视觉判断
为什么 * { margin: 0; padding: 0 } 对 dialog 无效
通配符选择器无法匹配 dialog 的内部渲染树结构：
-
dialog在打开时（showModal()）会脱离普通文档流，进入顶层渲染层，部分 UA 样式由浏览器引擎直接注入，绕过 CSS 层级规则 -
::backdrop是伪元素，*不匹配伪元素 - 某些浏览器（如旧版 Safari）对
dialog的 UA 样式使用了更高权重的内部规则，*无法覆盖
容易被忽略的 vertical-align 和 line-height 干扰
即使清掉了 margin 和 padding，dialog 内部文字仍可能“浮起来”或“下沉”，这不是边距问题：
立即学习“前端免费学习笔记（深入）”；
-
dialog默认display: block，但内容若为行内元素（如纯文本、span），受父级line-height和基线对齐影响 - 解决方案：给
dialog显式设line-height: 1.2或font-size: 16px，再配合vertical-align: top（仅对 inline 子元素生效） - 更可靠的做法：在
dialog内包裹一层<div class="dialog-content">，对其设display: flex; align-items: flex-start;，彻底脱离基线对齐逻辑
真正麻烦的从来不是“怎么清”，而是清完之后发现空隙还在——那大概率是 dialog 内部子元素的 margin 折叠了，或者你忘了它默认 border: none，但某些框架悄悄加了 outline。
