dialog默认有margin、outline和padding（1em），非盒模型间隙，需重置margin:0、outline:none、padding:0及dialog::backdrop背景；safari不支持，须用polyfill或降级方案。
dialog元素默认有margin和outline，不是“空白缝隙”而是浏览器样式
浏览器对 <dialog></dialog> 的实现（如 Chrome/Edge）会添加默认 margin 和聚焦时的 outline，看起来像四周有“空白”，实际是样式叠加所致。Safari 目前不支持 <dialog></dialog>，所以这个现象只在支持它的浏览器中出现。
关键点：这不是 HTML 盒模型的“间隙”，不能靠 box-sizing: border-box 或父容器 font-size: 0 解决。
必须重置 margin、outline 和 backdrop（如有）
仅设 margin: 0 不够，因为 <dialog></dialog> 还可能继承父级 margin，且聚焦后 outline 会撑开视觉距离。backdrop 层（::backdrop）虽不影响 dialog 本体尺寸，但若没处理，容易误判“缝隙”来源。
-
dialog本身需显式设置：margin: 0、outline: none、border: none - 若使用
dialog.showModal()，务必同时重置dialog::backdrop的背景（否则半透明灰层会干扰视觉判断） - 避免用
display: block覆盖默认 display，因为<dialog></dialog>默认是display: block，但某些 UA 样式可能带额外行为
dialog {
margin: 0;
outline: none;
border: none;
}
dialog::backdrop {
background-color: transparent;
}
注意 position 和 transform 带来的偏移错觉
Chrome 实现 <dialog></dialog> 时，内部会用 transform: translate() 居中，但该 transform 不影响盒模型尺寸；真正导致“边缘贴不到视口”的，往往是开发者自己加了 padding、border，或父容器有 overflow: hidden 截断了 dialog 渲染区域。
- 检查是否意外给
dialog设置了padding（默认为1em，这是最常被忽略的“内边距缝隙”） - 若想让内容顶到 dialog 边缘，需额外设
padding: 0 - 不要依赖
top/left手动定位 ——<dialog></dialog>的居中逻辑由 UA 控制，覆盖后易出兼容问题
移动端 Safari 不支持，别白费劲
截至 iOS 17.5，Safari 仍不支持 <dialog></dialog>，所有 CSS 重置在它上面都不生效。如果项目需兼容 Safari，要么降级用 div + aria-modal 模拟，要么引入 dialog-polyfill 并注意 polyfill 会注入自己的样式类（如 dialog-polyfill-modal），此时重置目标要换成对应类名，而非原生 dialog 标签。
也就是说：你在 Chrome 里调好了 margin 和 padding，切到 Safari 就发现根本没渲染出来 —— 这不是 CSS 没写对，是标签压根没被识别。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
