去掉 ul 的圆点和缩进需同时设置 list-style: none、margin: 0、padding: 0；li 间距问题多源于 ul 的 margin-bottom 或 inline-block 空隙，推荐用 font-size: 0 或 gap 控制；全局 reset 副作用大，应按需局部重置。
怎么去掉 ul 的圆点和缩进
浏览器会给 ul 自带 margin、padding 和 list-style，不重置就永远有缩进和黑点。直接清最稳妥的方式是三者一起设：
-
list-style: none—— 干掉圆点/数字 -
margin: 0—— 清除上下外边距（特别是顶部空白） -
padding: 0—— 清除左侧内边距（那个“缩进”其实是 padding）
单独只设 list-style: none 是最常见的遗漏点，看起来“没点了”，但左边还空着一截，误以为是 HTML 结构问题。
ul 里 li 还有默认间距怎么办
li 本身没有 margin，但换行会生成空格节点，在 inline 或 inline-block 场景下造成间隙；更常见的是父级 ul 的 margin-bottom 或 line-height 影响视觉距离。
- 检查是不是
ul自身还有margin-bottom（比如 Chrome 默认是1em） - 如果
li设了display: inline-block，用font-size: 0在ul上压掉空白字符间隙 - 避免用
vertical-align拼凑对齐，容易在不同字体下错位
用 CSS Reset 还是单独清 ul
全局 reset（比如 * { margin: 0; padding: 0; }）看似省事，但副作用大：表单控件、标题、段落全被拍平，后续反而要反复加回来。
立即学习“前端免费学习笔记（深入）”；
- 只对具体组件清：比如导航菜单的
.nav ul、侧边栏的.sidebar ul - 用
ul:not([class])匹配无 class 的裸ul，但注意兼容性（IE 不支持） - 现代项目推荐用
all: unset（慎用）—— 它会清掉所有继承属性，color和font-family也会丢
Flex 布局下 ul 还需要清样式吗
需要。Flex 不会自动覆盖 ul 的原始 margin/padding，而且 list-style 依然生效。哪怕你把 ul 设成 display: flex，圆点还在，左侧缩进也还在。
- 必须显式写
ul { list-style: none; margin: 0; padding: 0; } - 如果子项
li也要 Flex 排列，记得给li加display: flex或保持块级，别依赖默认行为 - 用
gap控制li间距比用margin更干净，但 IE 不支持
最容易被忽略的是：清完样式后，如果内容是链接，a 标签自带下划线和颜色，那不是 ul 的问题，但新手常回头去调 ul。
