迹忆客 专注技术分享

本文将介绍几种在两个 HTML 按钮之间田间空间的方法。

在 HTML 中在两个按钮之间添加一个空的 div 元素以添加它们之间的空间

可以在两个按钮之间添加一个空的 div 以在它们之间添加一个空格。然后，我们可以为 div 提供一些宽度，从而在按钮之间创建一些空间。

默认情况下，div 具有 block 的 display 属性。这意味着 div 占据其位置的一整行。

如果我们在 div 之后添加一个元素，该元素将被放置在浏览器中的 div 下方。

因此我们必须将 div 的显示属性更改为 inline-block。inline-block 元素具有块和内联的属性。

inline-block 元素可以具有宽度、边距、填充等，但与 block 元素不同，它们不会占据其位置的整行。

例如，创建一个 div；在那个 div 中，使用 button 标签创建两个按钮。将这些按钮命名为 Button 1 和 Button 2。

在这些按钮之间创建一个 div 并给它一个 space 类。这个 div 不应包含任何元素。

在 CSS 中选择内部的 div 及其类 space，并将 display 属性设置为 inner-block。根据要求给 div 一些宽度。

请注意，width 的值将是按钮之间的空间。此外，将 height 属性设置为 auto，以便 div 仅采用所需的高度。

下面的示例显示两个按钮的空间为 4px。

示例代码：

<div>
  <button>
    Button 1
  </button>
  <div class="space">
  </div>
  <button>
    Button 2
  </button>
</div>

.space {
  width: 4px;
  height: auto;
  display: inline-block;
}

在 HTML 中使用 margin-right 属性的按钮之间放置空间

CSS margin 属性在任何已定义边界之外的元素周围创建空间。margin 属性结合了四个属性：margin-top、margin-bottom、margin-left 和 margin-right。

margin-top 属性在元素的顶部创建空间。同样，margin-bottom、margin-right 和 margin-left 属性在元素的底部、右侧和左侧创建空间。

我们可以使用第一个按钮元素的 margin-right 属性在按钮之间创建一个空间。

结果，将在按钮右侧创建一定宽度的边距。然后，另一个按钮将位于边距旁边。

例如，使用 button 标签和名称 Button 1 和 Button 2 创建两个按钮。将按钮的类别设置为 B1 和 B2。

在 CSS 中，选择 B1 类并将其 margin-right 属性设置为 4px。这将在 Button 1 右侧创建一个 4px 空间，在两个按钮之间创建一个空间。

示例代码：

<button class="B1">
  Button1
</button>
<button class="B2">
  Button2
</button>

.B1 {
 margin-right: 4px;
}

在 HTML 中使用 margin-right 属性和 not(:last-child) 选择器的多个按钮之间提供空间

我们可以使用 margin-right 属性和 CSS not() 选择器在多个按钮之间田间空间。这种方法背后的逻辑是我们将使用 margin-right 属性在每个按钮之间创建空间，就像在第二种方法中一样。

但是，我们不会在最后一个按钮之后创建空格。

为此，我们将使用 not() 选择器。在里面，not 选择器，我们可以使用:last-child。

:last-child 选择器表示容器内的最后一个孩子。作为一个整体，我们可以应用以下规则来应用样式。

.container>.button:not(:last-child){

}

> 符号选择 container 内的每个子项。结果，样式将应用于父 container 内具有类 button 的所有子代，除了最后一个子代。

例如，创建一个 div 并给它一个 container 类。

在 div 中，创建三个按钮并将它们命名为 Button 1、Button 2 和 Button 3。此外，将 button 设置为每个按钮的类。

现在，使用上面提到的规则在 CSS 中设置样式。在规则内部，使用 margin-right 属性并将其设置为 10px 以在子元素或按钮之间添加空间 10px。

下面的例子显示三个按钮之间有一个 10px 的空间。

示例代码：

<div class='container'>
 <button class='button'>Button 1</button>
 <button class='button'>Button 2</button>
 <button class='button'>Button 3</button>
</div>

.container>.button:not(:last-child) {
 margin-right: 10px;
}