ul默认有margin-top、margin-bottom（约1em）和padding-left（chrome/firefox约40px，safari约2em）；list-style:none仅移除项目符号，不重置边距；需显式设置margin:0;padding:0才彻底清除。
ul 默认的 margin 和 padding 是什么
浏览器给 ul 设了默认 margin-top 和 margin-bottom（通常是 1em），还有 padding-left（Chrome/Firefox 约 40px，Safari 可能是 2em）。这不是 bug，是规范要求的「用户代理样式」，目的是让列表视觉上缩进、有层级感。
只写 list-style: none 为什么没用
常见误操作：以为干掉圆点就完事了。其实 list-style: none 只影响项目符号，完全不碰 margin 和 padding。结果就是“没点了”，但左边还空着一截，顶部/底部仍有空白——看起来像结构问题，其实是默认边距在作祟。
-
ul { list-style: none; }→ 仅移除圆点，margin/padding照旧 -
ul { margin: 0; padding: 0; }→ 才真正清掉所有默认间距 - 若只想清导航里的
ul，用nav ul { margin: 0; padding-left: 0; }更安全，不影响内容区的列表
用 * 重置会出什么问题
* { margin: 0; padding: 0; } 确实一键清空，但代价是：所有元素（p、h1、input、blockquote……）的原生间距全没了。段落贴着标题、按钮挤在一起、表单控件错位——你得手动给每个需要间距的元素补 margin 或 padding，调试成本反而更高。
- 适合原型或极简小项目，不建议用于中大型项目
- 如果用了它，必须立刻补上
body { margin: 0; } p { margin-bottom: 1rem; } h2 { margin-bottom: 0.5rem; }这类基础排版规则 - 更可持续的做法是引入
normalize.css，它保留合理默认值，只修正跨浏览器差异
清除后 li 还有间隙怎么办
清完 ul 的 margin 和 padding，li 之间可能还有空隙——这通常不是 li 自身有 margin，而是换行符生成的空白字符被渲染成空格，尤其当 li 设为 display: inline-block 时。
- 快速验证：在 DevTools 中选中
li，看 computed 样式里margin是否为 0，line-height是否过大 - 稳妥解法：
ul { font-size: 0; } li { font-size: 1rem; display: inline-block; }（注意可访问性影响） - 更推荐：
li { margin: 0; line-height: 1.4; }+ 检查父级ul是否有残留margin-bottom
实际布局中，最常踩的坑不是“没清掉”，而是清得太狠又忘了补——比如清完 ul 后，导航菜单紧贴 header，但正文里的列表也跟着塌陷了。关键在于：明确你要控制的是哪一层的列表，然后用最窄的作用域选择器下手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
