浏览器对 body 的默认外边距为 margin: 8px，行高为 line-height: 1.12；该默认 margin 导致页面四周出现“白边”，常需重置为 margin: 0，但需注意可能影响 p、h1 等元素的相对间距计算。
浏览器对 body 的默认外边距和行高是啥
几乎所有浏览器（Chrome、Firefox、Safari、Edge）都会给 body 元素加 margin: 8px 和 line-height: 1.12。这个 8px 是导致页面四周总有一圈“白边”的元凶，也是很多初学者纳闷“为啥没写 margin 却有空隙”的原因。
常见应对方式就是重置：body { margin: 0; }。但注意：如果项目依赖用户代理样式做基础排版（比如某些 CMS 模板），直接清零可能让段落间距塌缩——因为 p 的上下 margin（如 1.12em）是相对于 body 字体大小计算的，而 body 默认字体大小通常为 16px，所以实际是 ~18px。清掉 body margin 后，别忘了检查 p、h1 等是否仍保持合理视觉节奏。
h1 到 h6 的默认字号和上下 margin 差异
标题标签不是单纯“变大变粗”，它们自带严格的比例化 margin 和 font-size：
-
h1：font-size: 2em（≈32px），margin: 0.67em 0（≈21px 上下） -
h2：font-size: 1.5em（≈24px），margin: 0.75em 0（≈18px） -
h3：font-size: 1.17em（≈18.7px），margin: 0.83em 0（≈15px） -
h4、p、blockquote等共用margin: 1.12em 0（≈18px） -
h5和h6的 margin 反而更大（1.5em/1.67em），这是为了在小字号下维持可读的呼吸感
这些值在不同浏览器中高度一致，但 IE6–8 曾把 h1 margin 设为 0.67em 而非标准 .67em（少了个 0），极少数老兼容场景需留意。
ul、ol、dl 的默认缩进和列表符号来源
无序/有序列表的左侧空白不是靠 padding-left，而是由浏览器内置的 margin-left: 40px（针对 ul、ol、dd）驱动的。列表项 li 本身没有左右 margin，只靠父容器撑开空间。
列表符号（如圆点、数字）属于渲染层行为，不占 DOM 宽度，也不响应 color 或 font-size（除非用 list-style-image 或 CSS 自定义）。真正控制它的只有三个属性：list-style-type、list-style-position（inside/outside）、list-style-image。
容易踩的坑：
- 直接给
ul设padding: 0不会去掉左侧空白，得清margin-left -
dl中的dd默认也有margin-left: 40px，但dt没有 margin，所以术语和解释会错位——常需手动对齐 - 嵌套列表（如
ul > li > ul）默认取消子列表的上下 margin（margin-top: 0; margin-bottom: 0），避免间距爆炸
table 相关标签的 display 值与单元格对齐逻辑
表格不是靠 div 拼出来的，它有一套独立的 display 层级：table → table-row-group（tbody）→ table-row（tr）→ table-cell（td/th）。这意味着你不能对 tr 设置 margin，也不能对 td 设 float——它们压根不走普通块级流。
关键细节：
-
th默认font-weight: bolder且text-align: center，但td默认左对齐、常规字重 -
caption默认居中，且 display 为table-caption，位置固定在 table 顶部（即使 HTML 里写在tfoot后面） -
border-spacing: 2px是 table 默认值，影响单元格间距；想实现“无间隙”表格得设border-collapse: collapse -
thead、tbody、tfoot的vertical-align: middle是组级行为，不影响单个td内部对齐——后者还得靠td { vertical-align: top }
最常被忽略的是：哪怕你删光所有 CSS，table 依然能自适应内容宽度、自动换行、保持行列对齐——这是 display 表格模型的底层能力，和 flex/grid 完全不同路子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
