在 HTML 中的按鈕之間新增空間

1. 在 HTML 中在兩個按鈕之間新增一個空的 div 元素以新增它們之間的空間
2. 在 HTML 中使用 margin-right 屬性的按鈕之間放置空間
3. 在 HTML 中使用 margin-right 屬性和 not(:last-child) 選擇器的多個按鈕之間提供空間

本文將介紹幾種在兩個 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;
}