如何消除HTML/CSS中文件预览模块盒子之间的空白间距？

你当前遇到的预览盒间隙问题可通过以下步骤排查解决：

效果示意 #

问题根因 #

从你提供的代码来看，间隙主要来自两处：

1. 每个预览盒子使用了Bootstrap的my-1工具类，该类会为元素添加上下各0.25rem的外边距
2. 盒子内部的<ul>标签默认自带上下外边距，会额外撑开间距

修复方案 #

• 方案一：修改Bootstrap类名（最快生效）
  把预览容器的my-1类替换为my-0（上下外边距设为0），同时给内部<ul>添加m-0类清除默认边距，修改后相关代码如下：

  <div class="container p-1 my-0 border">
      <ul class="m-0">
  

• 方案二：自定义CSS样式覆盖
  如果你不想修改原有类名，可以给预览容器新增自定义类名（比如preview-item），然后添加如下样式：

  /* 清除盒子自身外边距 */
  .preview-item {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  /* 清除ul默认边距 */
  .preview-item ul {
    margin: 0 !important;
  }
  

• 方案三：如果修改后仍有细微间隙，可给<li>标签也添加m-0类，清除列表项默认边距即可。

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