在内联块按钮之间添加空格

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

如何添加保证金？

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

Answer 2

您可以使用margin-right上的.button执行此操作：

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

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

Answer 3

添加保证金权利：20px;你的.button课程

Answer 4

在样式表中为“.button {...}”添加一个边距。

margin: 5%;

％并不重要，但使用它而非像素，因此它在屏幕尺寸上的覆盖范围更加多样化。

Answer 5

修改您的代码，如下所示： 您需要添加保证金

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

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