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

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

本文將介紹幾種在兩個 HTML 按鈕之間田間空間的方法。

在 HTML 中在兩個按鈕之間新增一個空的 div 元素以新增它們之間的空間

可以在兩個按鈕之間新增一個空的 div 以在它們之間新增一個空格。然後,我們可以為 div 提供一些寬度,從而在按鈕之間建立一些空間。

預設情況下,div 具有 blockdisplay 屬性。這意味著 div 佔據其位置的一整行。

如果我們在 div 之後新增一個元素,該元素將被放置在瀏覽器中的 div 下方。

因此我們必須將 div 的顯示屬性更改為 inline-blockinline-block 元素具有塊和內聯的屬性。

inline-block 元素可以具有寬度、邊距、填充等,但與 block 元素不同,它們不會佔據其位置的整行。

例如,建立一個 div;在那個 div 中,使用 button 標籤建立兩個按鈕。將這些按鈕命名為 Button 1Button 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-topmargin-bottommargin-leftmargin-right

margin-top 屬性在元素的頂部建立空間。同樣,margin-bottommargin-rightmargin-left 屬性在元素的底部、右側和左側建立空間。

我們可以使用第一個按鈕元素的 margin-right 屬性在按鈕之間建立一個空間。

結果,將在按鈕右側建立一定寬度的邊距。然後,另一個按鈕將位於邊距旁邊。

例如,使用 button 標籤和名稱 Button 1Button 2 建立兩個按鈕。將按鈕的類別設定為 B1B2

在 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 1Button 2Button 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;
}
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn

相關文章 - HTML Button