使用CSS gap属性调整文章间距时遇到异常问题

你的问题根源有两个：

1. CSS规则覆盖问题：代码里同时存在全局的section:nth-of-type(2)规则和媒体查询@media screen and (min-width: 1025px)内的同选择器规则。当屏幕宽度≥1025px时，媒体查询内的gap:5px会覆盖你修改的全局gap设置，导致你看不到10px的间距效果。
2. 固定宽度+gap导致布局溢出：你给article设置了flex:0 0 33% !important，固定了单篇文章宽度为容器的33%。当gap从5px增大到10px时，一行三个文章的总宽度（3×33% + 2×gap）会超过容器宽度，触发flex-wrap:wrap换行，再加上justify-content:space-around的作用，布局自然和预期不符。

解决步骤 #

• 同步修改两处gap值：把媒体查询内的section:nth-of-type(2)里的gap:5px改成10px，确保不同屏幕尺寸下的间距一致。
• 调整flex属性适配gap：将flex:0 0 33% !important替换为flex:1 1 calc(33.333% - (2 * 10px)/3)，让文章宽度自动减去gap占用的空间，避免换行。如果不需要!important，建议直接去掉，用选择器优先级来控制样式。

修改后的CSS示例 #

@media screen and (min-width: 1025px) {
  section:last-of-type article {
    display: block !important;
  }

  section:nth-of-type(2) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px; /* 同步修改媒体查询内的gap */
  }

  section article {
    height: 25vh;
    flex: 1 1 calc(33.333% - (2 * 10px)/3); /* 适配gap的flex宽度设置 */
  }
}

section:nth-of-type(2) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 修改全局gap */
  justify-content: space-around;
}

body {
  gap: 15px;
  display: flex;
  flex-direction: column;
}

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