设置list-style:none后列表垂直间距与示例不一致，求原因分析

对比你的代码和freeCodeCamp示例的代码，视觉差异主要来自这几个细节：

1. 顶部标题栏的内边距不同 #

你的.lvl设置：

.lvl {
  padding: 5px;
}

示例的.level设置：

.product > .level {
  padding: 15px 0;
}

示例的顶部标题栏上下内边距更大，栏高更高，视觉上更突出，和下方内容的分隔感更强。

2. 价格标题的外边距缺失 #

示例给价格标题（h2）设置了上边距：

.product > h2 {
  margin-top: 15px;
}

你的代码里没有给价格元素设置外边距，导致价格和顶部标题栏紧紧贴在一起，没有呼吸空间。

3. 列表容器<ol>的外边距缺失 #

示例给<ol>设置了上下外边距：

.product > ol {
  margin: 15px 0;
}

你的代码只给<li>设置了内边距，但<ol>本身没有上下外边距，所以列表会和上方的价格、下方的按钮（如果有的话）贴得很近，而示例的列表和上下元素有明显的间距。

4. 顶部标题的字体样式差异 #

示例的.level有额外的字体样式：

.product > .level {
  text-transform: uppercase;
  font-weight: 700;
}

你的.lvl没有设置字体加粗和大写转换，所以顶部标题的视觉权重比示例弱，风格也不一样。

另外，你全局设置的li {list-style: none;}只会隐藏列表项标记，不会造成整体布局的间距差异，核心差异还是上面几个内外边距和字体样式的设置。

内容的提问来源于stack exchange，提问作者Markewycz