div宽度与文本适配异常：JSFiddle正常本地HTML/CSS出间隙

该布局在在线编辑器中显示正常，但本地HTML/CSS文件里，文本与上方气泡div之间出现多余间隙，不符合预期的紧凑布局效果。预期文本紧贴div下方无空隙，实际却存在明显间距。

相关代码 #

HTML代码 #

<div class="bubble">
    <ul>
      <li>
        <span>
        <div class="bubble-bg bg-1">
        <img src="https://www.pngkey.com/png/full/889-8891004_calling-girl-png-call-center-girl-png.png" />
        </div>
        </span>
        <p class="desc">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
        </p>
      </li>
      
      <li>
        <span>
        <div class="bubble-bg bg-2">
        <img src="https://www.pngkey.com/png/full/889-8891004_calling-girl-png-call-center-girl-png.png" />
        </div>
        </span>
        <span> 
        <p class="desc">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
        </p>
        </span>
      </li>
      
      <li>
        <span>
        <div class="bubble-bg bg-3">
        <img src="https://www.pngkey.com/png/full/889-8891004_calling-girl-png-call-center-girl-png.png" />
        </div>
        </span>
        <p class="desc">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
        </p>
      </li>
      
      <li>
        <span>
        <div class="bubble-bg bg-4">
        <img src="https://www.pngkey.com/png/full/889-8891004_calling-girl-png-call-center-girl-png.png" />
        </div>
        </span>
        <p class="desc">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
        </p>
      </li>

    </ul>
    </div>

CSS代码 #

.bubble ul { 
  columns:4;
  list-style: none;
  display:flex;
  align-items: center;
  justify-content: center;
}
.bubble-bg {
  width: 300px;
  height: 300px;
  border-radius: 20% 45% 45% 5%;
  background: #f5e511;
  overflow: hidden;
}
.bubble-bg img {
  max-width: 100%;
  max-height: 100%;
}

.desc {
  font-size: 26px;
}

问题原因分析 #

• 默认样式差异：在线编辑器自带默认CSS重置规则，本地文件未做重置。p标签浏览器默认带有margin-top和margin-bottom，这是间隙的直接来源。
• Flex布局对齐放大间隙：父元素ul设置了align-items: center，使li内内容垂直居中，p的默认外边距被纳入居中计算，进一步拉大了视觉上的间隙。
• 冗余结构增加复杂度：部分li中p被额外span包裹，虽不直接引发间隙，但会与默认样式叠加，增加布局意外性。

解决方法 #

1. 移除p标签默认外边距：

.desc {
  font-size: 26px;
  margin: 0;
}

2. 调整Flex对齐方式（若无需垂直居中）：

.bubble ul { 
  columns:4;
  list-style: none;
  display:flex;
  align-items: flex-start;
  justify-content: center;
}

3. 清理冗余HTML结构，移除不必要的span包裹，简化布局层级。

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