响应式按钮间距CSS实现：每行两个等宽居中按钮的20px间隙问题

嘿，这个问题确实看起来简单，但实际因为CSS盒模型和布局细节容易踩坑！我来给你几个靠谱的解决方案，帮你搞定中间的20px白色间隙：

Flexbox天生就是为这种等分+间隙的布局设计的，能完美解决你的需求，还能避免inline-block带来的空格问题。修改后的代码如下：

div{ 
  margin: 0 auto; 
  max-width:400px; 
} 
.gifsMainCategories{ 
  list-style:none; 
  margin:10px auto; 
  padding:0; 
  width:100%;
  /* 新增Flex核心属性 */
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 直接设置子元素之间的间隙，这就是你要的白色间隔 */
} 
.gifsMainCategories li{ 
  flex: 0 0 calc(50% - 10px); /* 固定宽度：50%减去gap的一半，确保两个元素加起来刚好填满容器 */
  font-size:16px; 
  height:60px; 
  line-height:60px; 
  background:red; 
  margin:10px 0; /* 只保留上下margin，左右间隙交给gap控制 */
}

解释：

• gap:20px直接定义了列表项之间的水平和垂直间隙，不用手动算margin；
• calc(50% -10px)是因为两个列表项会共享20px的间隙，每个项需要让出10px的空间，这样总宽度刚好是容器的100%；
• flex-wrap:wrap确保在容器变窄时（比如小屏幕）自动换行，保持每行两个的布局。

如果需要兼容不支持Flex的旧浏览器，可以用calc计算宽度，同时处理inline-block的空格问题：

div{ 
  margin: 0 auto; 
  max-width:400px; 
} 
.gifsMainCategories{ 
  list-style:none; 
  font-size:0; /* 消除inline-block元素之间的空格，避免占宽度 */
  margin:10px auto; 
  padding:0; 
  width:100%;
} 
.gifsMainCategories li{ 
  display:inline-block; 
  width: calc(50% - 10px); /* 50%宽度减去10px，预留间隙空间 */
  font-size:16px; 
  height:60px; 
  line-height:60px; 
  background:red; 
  margin:10px 5px; /* 左右各5px，两个项之间就形成20px的间隙 */
  box-sizing: border-box; /* 确保border/padding不会超出计算的宽度，建议加上 */
}

注意：font-size:0是关键，因为inline-block元素之间的空格会被解析为空白字符，占用宽度，导致两个50%的元素放不下。加上这个就能解决这个问题。

Grid布局也是绝佳选择，代码更简洁，语义化更强：

div{ 
  margin: 0 auto; 
  max-width:400px; 
} 
.gifsMainCategories{ 
  list-style:none; 
  margin:10px auto; 
  padding:0; 
  width:100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 直接定义每行两列，自动等分宽度 */
  gap: 20px; /* 同样用gap设置间隙 */
} 
.gifsMainCategories li{ 
  font-size:16px; 
  height:60px; 
  line-height:60px; 
  background:red; 
  margin:10px 0;
}

解释：repeat(2,1fr)会把容器宽度平均分成两份，每个列表项占一份，gap:20px直接控制项之间的间隙，完全不用手动计算宽度，非常省心。

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