HTML/CSS新手求助：如何为inline-block按钮添加间距？

嘿，作为刚接触HTML/CSS的新手，遇到inline-block按钮间距的问题太正常啦！我给你整理几个简单实用的解决办法，你可以挑适合自己的来用：

方法1：用margin直接设置间距（最推荐，直观好调整） #

这是最适合新手的方案，直接给按钮类添加margin属性来控制间距，同时给最后一个按钮去掉多余的右侧间距，避免容器边缘留白：

修改后的CSS代码：

.button {
  display: inline-block;
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 25px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  margin-right: 12px; /* 每个按钮右侧添加12px间距，数值可以自己调 */
}
/* 给最后一个按钮去掉右侧间距 */
.button:last-child {
  margin-right: 0;
}
.button:hover {
  background-color: green;
}

你可以根据需求调整margin-right的数值，想要更大间距就改大一点，非常灵活。

方法2：消除HTML中的空格（原理性方案，维护略麻烦） #

inline-block元素之间的默认间距其实是因为HTML代码里的换行、空格被浏览器解析成了空白字符。如果把按钮的HTML代码连在一起写，就能消除这个默认间距，再配合margin也能控制间距：

修改后的HTML代码：

<a href="..\Requests\Request" class="button">Standard Request</a><a href="..\Requests\PlannerUpload" class="button">Bulk or Special Request</a><a href="..\Requests\NewPlannerDevice" class="button">New Device Request</a><a href="..\Requests\Requesttest" class="button">Tester Request</a>

不过这种方法会让HTML代码可读性变差，后续维护不太方便，所以更推荐方法1。

方法3：父容器设置font-size: 0（精准控制间距） #

如果想彻底消除inline-block的默认空白，同时用margin精准控制间距，可以给按钮的父容器添加font-size: 0，然后再给按钮重置font-size：

首先给按钮套一个父容器（比如div）：

<div class="button-group">
  <a href="..\Requests\Request" class="button">Standard Request</a>
  <a href="..\Requests\PlannerUpload" class="button">Bulk or Special Request</a>
  <a href="..\Requests\NewPlannerDevice" class="button">New Device Request</a>
  <a href="..\Requests\Requesttest" class="button">Tester Request</a>
</div>

然后修改CSS代码：

.button-group {
  font-size: 0; /* 消除子元素inline-block之间的空白 */
}
.button {
  display: inline-block;
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 25px;
  text-align: center;
  font-size: 16px; /* 重置按钮的字体大小，避免继承父容器的0 */
  cursor: pointer;
  margin: 0 6px; /* 左右各6px间距，总间距12px，可自行调整 */
}
.button:hover {
  background-color: green;
}

这个方案能让间距完全由margin控制，不会有默认空白的干扰，适合对布局精度要求高的场景。

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