游乐游手机版
首页/前端开发/文章详情

HTML标签所有默认样式完整汇总，建议收藏

时间：2026-06-29 06:59
浏览器为 HTML 标签施加的默认样式，其实从来都不是什么“标准答案”，而是各渲染引擎（WebKit、Blink、Gecko）各自实现的 UA stylesheet。因此，想要找到一张“所有标签默认样式的静态清单”，这种想法本身就显得不太现实——它会随着浏览器版本、操作系统（macOS、Window
浏览器为 HTML 标签施加的默认样式，其实从来都不是什么“标准答案”，而是各渲染引擎（WebKit、Blink、Gecko）各自实现的 UA stylesheet。因此，想要找到一张“所有标签默认样式的静态清单”，这种想法本身就显得不太现实——它会随着浏览器版本、操作系统（macOS、Windows、Linux）乃至用户的系统字体设置而动态变化。

HTML标签自带的默认样式全汇总（建议收藏）

Chrome / Edge（Blink）里最常踩坑的默认 margin 和 padding

先来聊聊那些最常见的布局问题吧。你猜到它们是怎么来的吗？其实，绝大多数布局“翻车”的点，都集中在少数几个标签的默认外边距上：

  • 到
    ：上下 margin 通常为 0.67em / 0.83em。请注意，这不是固定的像素值，而是基于当前 font-size 动态计算的相对值。

  • ：上下 margin 大约 1em，左右为 0。

    • 、
        ：顶部 margin 大约 1em，左侧 padding-left: 40px。注意这个 40px 是内边距，不是外边距，很多简单的 reset 方案容易漏掉它。
      1. ：左右 margin 大约 40px，顶部底部也有 margin。
      2. ：自带 white-space: pre 和 margin: 1em 0。
    至于这些值的真实数值，最靠谱的方法是直接在 Chrome DevTools 的 “Computed” 面板里查看。别轻信那些“固定 16px”的网传说法，一查一个准。

    display 类型不统一，直接导致盒模型行为突变

    再来看另一个让人头疼的问题：display 类型。比如 默认是 inline，但