HTML のボタン間にスペースを追加する

1. HTML で 2つのボタンの間に空の div 要素を追加してそれらの間にスペースを追加する
2. margin-right プロパティを使用して、HTML のボタンの間にスペースを入れます
3. margin-right プロパティと not(:last-child) セレクターを使用して、HTML の複数のボタンの間にスペースを提供する

この記事では、2つの HTML ボタンの間にスペースを追加するいくつかの方法を紹介します。

HTML で 2つのボタンの間に空の div 要素を追加してそれらの間にスペースを追加する

空の div を 2つのボタンの間に追加して、それらの間にスペースを追加できます。次に、ボタンの間にいくらかのスペースを作成する幅を div に提供できます。

デフォルトでは、div には block の display プロパティがあります。これは、div がその位置の行全体を占めることを意味します。

div の後に要素を追加すると、その要素はブラウザの div の下に配置されます。

したがって、div の display プロパティを inline-block に変更する必要があります。inline-block 要素には、block と inline の両方のプロパティがあります。

inline-block 要素には幅、マージン、パディングなどを含めることができますが、block 要素とは異なり、それらはその場所の行全体を占めるわけではありません。

たとえば、div を作成します。その div 内で、button タグを使用して 2つのボタンを作成します。それらのボタンにButton 1 とButton 2 という名前を付けます。

それらのボタンの間に div を作成し、それにspaceのクラスを与えます。この div には要素を含めないでください。

CSS でクラス space を持つ内部 div を選択し、display プロパティを inner-block に設定します。要件に応じて、div にある程度の幅を与えます。

width の値はボタン間のスペースになることに注意してください。また、height プロパティを auto に設定して、div が必要な高さだけを取るようにします。

次の例は、2つのボタンのスペースが 4px であることを示しています。

サンプルコード：

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

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

margin-right プロパティを使用して、HTML のボタンの間にスペースを入れます

CSS の margin プロパティは、定義された境界線の外側の要素の周りにスペースを作成します。margin プロパティは、margin-top、margin-bottom、margin-left、および margin-right の 4つのプロパティを組み合わせたものです。

margin-top プロパティは、要素の上部にスペースを作成します。同様に、margin-bottom、margin-right、および margin-left プロパティは、要素の下部、右側、および左側にスペースを作成します。

最初のボタン要素に margin-right プロパティを使用して、ボタン間にスペースを作成できます。

その結果、ボタンの右側に一定の幅のマージンが作成されます。次に、もう一方のボタンが余白の横に表示されます。

たとえば、button タグを使用して 2つのボタンを作成し、Button 1 と Button 2 という名前を付けます。ボタンのクラスを B1 と B2 に設定します。

CSS で、B1 クラスを選択し、その margin-right プロパティを 4px に設定します。これにより、Button 1 の右側に 4px のスペースが作成され、2つのボタンの間にスペースが作成されます。

サンプルコード：

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

.B1 {
 margin-right: 4px;
}

margin-right プロパティと not(:last-child) セレクターを使用して、HTML の複数のボタンの間にスペースを提供する

margin-right プロパティと CSSnot() セレクターを使用して、複数のボタンの間にスペースを追加できます。このアプローチの背後にあるロジックは、2 番目の方法のように margin-right プロパティを使用して各ボタンの間にスペースを作成することです。

ただし、最後のボタンの後にスペースは作成しません。

そのために、not() セレクターを使用します。内部では、セレクターではなく、:last-child を使用できます。

:last-child セレクターは、コンテナー内の最後の子を示します。全体として、次のルールを適用してスタイルを適用できます。

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

}

> 記号は、container内のすべての子を選択します。その結果、スタイルは、最後の子を除いて、親container内にクラスbuttonを持つすべての子に適用されます。

たとえば、div を作成し、それに container のクラスを指定します。

div 内に 3つのボタンを作成し、それらに Button 1、Button 2、および Button 3 という名前を付けます。また、各ボタンのクラスとしてbuttonを設定します。

次に、上記のルールを使用して、CSS でスタイルを設定します。ルール内で、margin-right プロパティを使用して 10px に設定し、子要素またはボタンの間の 10px にスペースを追加します。

次の例は、3つのボタンの間に 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;
}