Chrome DevTools显示无实际存在的列表margin问题咨询

我在制作展示优惠信息的小模块时遇到一个问题：Chrome开发者工具里能看到无序列表（<ul>）被标注有外边距，但实际页面中这个外边距完全看不到，这是为什么？

代码片段 #

CSS代码

.aroundworld .colquater {
    width: 260px;
    margin-left: 20px;
    margin-right: 20px;
}
.aroundworld .hotelpictures {
    width: 260px;
    margin-bottom: 8px;
    display: block;
}
.aroundworld .category {
    margin-bottom: 5px;
    color: #a56037;
    font-size: 14px;
    font-weight: 600;
}
.aroundworld .type {
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: 600;
    text-align: justify;
}
.aroundworld .price {
    margin-bottom: 5px;
    color: gray;
    font-size: 16px;
}
.aroundworld ul {
    overflow: hidden;
}
.aroundworld li {
    float: left;
}

HTML代码

<div class="left colquater">
  <img class="hotelpictures" src="pictures/hotel-1.jpg">
  <p class="category">GANZE WOHNUNG &middot; KOPENHAGEN</p>
  <p class="type">Sonniges Penthouse mit 5 Balkonen</p>
  <p class="price">206€ pro Nacht</p>
  <ul class="left">
      <li>&#9733;</li>
      <li>&#9733;</li>
      <li>&#9733;</li>
      <li>&#9733;</li>
      <li>&#9733;</li>
  </ul>
  <p class="rec">320</p>
</div>

开发者工具截图 #

原因分析 #

这是两个因素共同作用的结果：

1. 浏览器默认样式的存在：所有现代浏览器的默认样式表都会给<ul>元素设置默认的margin-top和margin-bottom（通常为1em），所以开发者工具会检测到这个默认样式并标注出来。
2. 浮动与BFC的影响：
   • 你给<ul>设置了overflow: hidden，这个属性会触发BFC（块级格式化上下文），让<ul>能够包裹住内部浮动的<li>元素，避免高度塌陷。
   • 同时这个<ul>带有left类，结合模块布局推测，全局样式中大概率给.left设置了float: left——浮动元素会脱离正常文档流，它的上下外边距不会和相邻的块级元素（比如上下的<p>标签）发生外边距折叠，再加上相邻元素本身设置了margin-bottom，最终导致<ul>的默认外边距没有在页面中呈现出明显的视觉效果。

另外还有一种可能：<ul>的默认外边距和上下<p>标签的外边距发生了外边距折叠，最终实际显示的是两者中的最大值，而这个数值和你设置的margin-bottom: 5px差距很小，导致你误以为默认外边距不存在。

验证方法 #

• 给.aroundworld ul添加margin: 0，观察开发者工具的标注是否消失，同时看页面布局是否有变化。
• 暂时移除<ul>的overflow: hidden和<li>的float: left，查看<ul>的默认外边距是否会在页面中显示出来。

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