浏览器对<h1>到<h6>的margin和font-size并非硬编码固定值，而是由各引擎UA stylesheet动态计算得出，如<h1>上下margin约0.67em/0.83em、font-size在Chrome macOS为2em而Windows为1.8em，均依赖当前font-size及系统设置。
浏览器对 <h1> 到 <h6> 的 margin 和 font-size 是硬编码的
所有主流浏览器（Chrome、Firefox、Safari）都会给标题标签施加固定外边距和字号，比如 <h1> 默认是 font-size: 2em、margin: 0.67em 0，不是 CSS 文件里写的，而是 UA stylesheet（用户代理样式表）内置的。这意味着你没写任何 CSS，它也会有空白和大小。
常见踩坑点：
- 直接在
<h2>后面放<p>，中间会多出约1.12em的空隙，不是你漏写了margin-bottom: 0，而是<p>自己也有margin: 1.12em 0 - 用
<h3>做按钮文字时，字体突然变小还带上下留白，容易误以为是 class 没生效 -
<h1>在移动端可能撑破容器——因为2em是相对于父元素 font-size，而根字体可能被 viewport 缩放过
<p>、<ul>、<ol> 的默认 margin 是垂直方向的，且不可继承
这些块级元素默认只有 margin-top 和 margin-bottom，没有 margin-left 或 margin-right；而且这个 margin 不会从父元素继承，是每个元素自己“出厂自带”的。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 批量清 margin 时别只写
* { margin: 0 }，要配合padding: 0，否则<button>或<input>的内边距还在 - 想保留段落间距但去掉列表项前后的空隙？单独重置：
ul, ol { margin: 0; padding-left: 20px }（注意：padding-left是为了维持项目符号缩进） -
<ul>的list-style-position: outside是默认值，所以项目符号不占内容宽度；改成inside后，padding-left就得重新算
<div> 和 <span> 看似“无样式”，其实有 display 差异
<div> 默认 display: block，<span> 默认 display: inline——这是它们最本质的样式差异，也是布局失控的常见源头。
容易忽略的细节：
- 把
<span>当容器用时，设了width: 200px无效，因为它不响应宽高；必须加display: inline-block或display: block -
<div>套<p>没问题，但反过来——<p>里写<div>是 HTML5 语义错误（<p>的 content model 不允许块级子元素） -
<span>里放<img>会自动对齐 baseline，导致底部多出几像素空白；解决方法不是vertical-align: top就是改display: block
表格元素（<table>、<td>）的默认 border-spacing 和 vertical-align 很隐蔽
<table> 默认 border-spacing: 2px，<td> 和 <th> 默认 vertical-align: inherit（实际表现常为 middle），这两个值不会出现在开发者工具的“Computed”面板里显式标注，但真实影响布局。
典型问题场景：
- 手写表格没设
border-collapse: collapse，单元格之间总有 2px 缝隙，调border颜色也盖不住 -
<th>文字居中但图标靠上，是因为<th>默认text-align: center但vertical-align: middle只对单元格内容起作用，不对行内子元素自动居中 -
<caption>默认text-align: center且display: table-caption，但它不在表格渲染流里，margin行为和<p>不同，慎用margin-top
实际项目里，最麻烦的不是某个标签有多复杂，而是多个默认样式叠加后产生的“意外留白”或“错位”。比如 <h2> + <ul> + <li> 连用时，三者各自的 margin 全在起作用，而开发者往往只盯着其中一个调。这种叠加效应，比单个样式更需要提前预判。
