dialog默认padding由浏览器UA样式表定义，Chrome/Edge/Safari中通常为1em，Firefox不支持故回退为div；重置需用dialog{padding:0!important}或提升选择器特异性。
dialog标签默认padding在哪定义
浏览器对 <dialog> 的默认样式由用户代理样式表（UA stylesheet）控制，其中 padding 通常设为 1em（Chrome、Edge、Safari 均如此），但这个值不写在你的 CSS 里，所以直接写 padding: 0 是有效的，前提是确保样式优先级足够。
注意：Firefox 目前（截至 v128）仍**不支持** <dialog> 原生实现，会回退为普通 <div>，此时 UA 样式不生效，你写的 padding 才真正起作用——但这也意味着你得自己处理 backdrop、焦点管理等，和原生行为不一致。
用CSS重置padding的正确写法
必须使用足够强的选择器覆盖 UA 样式。仅写 dialog { padding: 0; } 在某些 Chrome 版本中可能被忽略，因为 UA 样式用了类似 dialog:not([open]) 这类更具体的选择器（虽然实际未显式写出，但内部权重高）。
- 推荐加
!important确保生效：dialog { padding: 0 !important; } - 或提升选择器特异性：
body dialog { padding: 0; }或dialog[open] { padding: 0; }（后者只影响打开状态） - 如果同时要清空 margin 和 border：
dialog { margin: 0; border: none; padding: 0; }
为什么有时改了padding对话框还是“撑开”
常见错觉：你以为是 padding 导致内容离边距远，其实是 <dialog> 默认有 display: block + 内部文字的 line-height 或首尾元素的 margin 外溢（尤其是 <p>、<h3>）造成视觉留白。
立即学习“前端免费学习笔记（深入）”；
- 检查是否误把子元素的外边距当成了 dialog 自身 padding
- 用浏览器开发者工具选中 dialog 元素，看 computed 样式中
padding是否真为 0 - 临时加
outline: 1px solid red可清晰区分边界和内容区域 - 若用
<form>包裹按钮，部分 UA 会给<form>加 margin，需一并重置
兼容性与 polyfill 场景下的padding处理
如果你用 @github/details-dialog 或 dialog-polyfill，它们会把 <dialog> 渲染为 <div role="dialog"> 并注入自己的 CSS，此时 UA 的 padding 规则完全不生效，你写的 dialog { padding: 0 } 也无效——因为元素已不是原生 <dialog>。
- polyfill 场景下，必须按其文档指定的选择器覆盖，例如：
.dialog-polyfill-overlay dialog { padding: 0; } - 或者直接给 dialog 添加 class：
<dialog class="no-pad">，再写.no-pad { padding: 0; } - 注意 polyfill 通常会强制设置
position: absolute和transform，padding 修改后可能影响居中逻辑，需配合top/left调整
原生 <dialog> 的 padding 行为简单，但一旦引入 polyfill 或跨浏览器部署，控制点就从一个属性扩散到渲染路径、JS 注入时机和 CSS 作用域——这点容易被忽略。
