CSS 输入按钮之间的间距

在本文中，我们将介绍如何使用CSS来调整输入按钮之间的间距。

阅读更多：CSS 教程

什么是输入按钮？

输入按钮是一种用于在HTML表单中提交或重置表单数据的元素。它们通常以按钮形式显示，并且在用户点击它们时触发相应的操作。

默认情况下的输入按钮间距

在HTML中，如果我们在表单中使用多个输入按钮，它们将默认显示在一起，并且彼此之间没有间距。以下是一个示例：

<form>
  <input type="submit" value="提交">
  <input type="reset" value="重置">
</form>

上述代码将在浏览器中显示两个按钮，它们紧密排列在一起。如果我们想要为它们之间添加间距，我们可以使用CSS来实现。

使用margin属性添加间距

CSS中的margin属性可用于为元素添加外边距。我们可以使用它来为输入按钮之间添加间距。以下是一个示例：

<style>
  .button {
    margin-right: 10px;
  }
</style>

<form>
  <input type="submit" value="提交" class="button">
  <input type="reset" value="重置" class="button">
</form>

在上面的示例中，我们创建了一个名为.button的CSS类，并为其添加了margin-right: 10px;样式。这将为每个具有该类的按钮添加10像素的右外边距，从而在它们之间创建间距。

使用padding属性添加间距

除了使用margin属性，我们还可以使用padding属性为输入按钮之间添加间距。padding属性可用于设置元素的内边距。以下是一个示例：

<style>
  .button {
    padding-right: 10px;
  }
</style>

<form>
  <input type="submit" value="提交" class="button">
  <input type="reset" value="重置" class="button">
</form>

在上述示例中，我们使用名为.button的CSS类，并为其添加了padding-right: 10px;样式。这将为每个具有该类的按钮添加10像素的右内边距，从而在它们之间创建间距。

使用flex布局添加间距

另一种创建输入按钮之间间距的方法是使用CSS的flex布局。Flex布局为我们提供了更灵活的方式来排列和布局元素。以下是一个示例：

<style>
  .button-container {
    display: flex;
    justify-content: space-between;
  }
</style>

<div class="button-container">
  <input type="submit" value="提交">
  <input type="reset" value="重置">
</div>

在上面的示例中，我们使用.button-container CSS类为按钮的包含容器应用了flex布局，并使用justify-content: space-between;样式将按钮之间的空间平均分配。这将在每个按钮之间创建相等的间距。