html - 在行内 block 按钮之间添加空间

Question

HTML/CSS 新手，我想在我创建的内联按钮之间添加一些空格。不知道该怎么做。

.button {
  display: inline-block;
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 25px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button:hover {
  background-color: green;
}

<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>

此代码生成在 photo 中看到的内容

Answer 1

增加 margin 怎么样？

.button {
  display: inline-block;
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 25px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  margin: 10px;
}

.button:hover {
  background-color: green;
}

<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>