<p>ul 默认有 margin（上下1em）和 padding-left（约40px），需用 ul { margin: 0; padding: 0; } 精准清除；若用 * 重置则影响全局，须手动补间距；padding-left 实现缩进，清除后需注意 li 间隙及 line-height 对齐问题。</p>
ul 默认的 margin 和 padding 怎么一键清掉
浏览器对 ul 有默认的 margin（通常是上下 1em）和 padding-left（约 40px），这会让列表在未样式化时“缩进又留空”。最直接的办法是用统配符重置，但得清楚它影响范围——它不只动 ul，还会扫到所有元素的内外边距。
- 推荐写法：
* { margin: 0; padding: 0; }—— 简单粗暴，适合原型、小项目或 CSS Reset 场景 - 更稳妥的写法：
ul { margin: 0; padding: 0; }—— 只针对列表，不影响表单、段落等其他元素 - 注意：如果用了
* { margin: 0; padding: 0; }，后续所有元素（比如p、h1、input）的默认间距全没了，必须手动补上需要的间距，否则排版会“贴在一起”
为什么 ul 的 padding-left 不是 0 而是 40px
这是 HTML 规范里定义的「用户代理样式表」行为，目的是让列表项视觉上缩进，区分层级。不同浏览器数值略有差异（Chrome/Firefox 是 40px，Safari 有时是 2em），但逻辑一致：靠 padding-left 实现缩进，而非 margin 或伪元素。
-
padding-left是内容区域左移，列表项（li）的文字会从新起点开始排布 - 如果只清
margin不清padding，列表看起来还是“向右偏”，容易误以为没生效 - 想保留缩进但去掉默认值？可改用
padding-left: 1.5rem;或text-indent+list-style-position: inside;，但后者会影响换行对齐
ul 和 li 组合时常见的间距错乱现象
清除 ul 的 margin 和 padding 后，li 之间还可能有空隙——这不是 ul 的问题，而是 li 默认为 display: list-item，且部分浏览器会给 li 加默认 margin 或受行高/字体大小影响产生间隙。
- 典型表现：列表项之间出现意外的空白行，尤其在
li内含inline元素时更明显 - 检查方法：打开 DevTools，选中
li，看 computed 样式里margin是否为 0、line-height是否撑开高度 - 快速修复：
li { margin: 0; line-height: 1.4; }或把ul设为font-size: 0;再给li单独设字体（慎用，影响可访问性）
要不要用 CSS Reset 或 Normalize.css 替代手写 ul 重置
如果你项目中不止要处理 ul，还要统一表单、标题、链接等行为，手写零散重置很快会失控。这时候用 normalize.css 是更可持续的选择——它不是清空一切，而是让各浏览器表现一致；而 reset.css（如 Eric Meyer 版）才真正走“归零”路线。
立即学习“前端免费学习笔记（深入）”；
-
normalize.css会保留ul的margin-bottom（1em），但标准化padding-left为 40px，适合渐进增强 -
reset.css直接设ul, ol { margin: 0; padding: 0; }，和你手写效果一致，但整份文件影响更大 - 真实项目建议：初期就引入
normalize.css，再局部覆盖ul，比如加一句ul.no-indent { padding-left: 0; }供特定场景使用
实际开发中，最容易被忽略的是：清除 ul 间距后，li 的垂直对齐和父容器的 line-height 会暴露出来——尤其是用 Flex 布局包裹列表时，一个没设 align-items 就可能导致文字“飘高”。这点比清不清单个 ul 更常引发调试时间浪费。
