CSS でマージンとパディングを使用する

1. CSS でのマージンの導入
2. CSS でのパディングの導入

マージンとパディングは CSS で似ているように見えるかもしれませんが、それらは異なります。このチュートリアルでは、CSS のマージンとパディングを紹介します。次に、それらの違いを理解し、マージンとパディングをいつ使用するかを学習します。

CSS でのマージンの導入

CSS では、マージンは任意の 2つの隣接する要素間のスペースです。これは、隣接する 2つの要素の境界間のスペースです。要素のマージンは、要素内のスペースを制御しません。むしろ、それは要素のすぐ外側のスペースに責任があります。margin プロパティを使用して、要素の 4 辺すべてのマージンを指定します。margin プロパティに 4つの値を書き込みます。値は、margin-top、margin-right、margin-bottom、および margin-left を順番に表します。次のように説明できます。

element {
margin: 20px 20px 20px 20px;
}

上記のコードは、4つの側面すべてから要素の 20px マージンを設定します。

3つの値のみを使用する場合、中央の値は margin-left および margin-right プロパティを表します。margin プロパティに 2つの値しかない場合、最初の値は上部と下部のマージンを表し、2 番目の値は左右のマージンを表します。単一のマージン値は、4 辺すべてのマージンを表します。

それでは、マージンとは何かを示しましょう。たとえば、クラスとして redbox と bluebox を使用して 2つの div を作成します。各クラスに 200px の height と width を与えます。ボックスの background-color を red と blue に設定します。次に、一番上のボックスである redbox の margin-bottom プロパティを 20px に設定します。

以下の例では、赤と青の 2つのボックスを作成します。margin-bottom プロパティは、赤いボックスの境界から下方向に 20px のスペースを提供します。これは、青いボックスが赤いボックスから 20px の距離を持つことを意味します。margin-bottom プロパティを削除すると、スペースが削除され、2つのボックスが接続されます。両方のボックスのテキストは、ボックスの境界に添付されており、左右にスペースがないことに注意してください。

サンプルコード：

<div class="redbox"> Red Box </div>
<div class="bluebox"> Blue Box </div>

.redbox {
 height:200px;
 width: 200px;
 background-color:red;
 margin-bottom:20px;
}

.bluebox {
 height:200px;
 width: 200px;
 background-color:blue;
 color:white;
}

Web ページ内の要素の位置を変更する場合は、CSS マージンを使用できます。margin プロパティを使用して、要素を左、右、上、下にシフトできます。マージンのもう 1つの用途は、2つの近くの要素間の距離を指定する必要がある場合です。上記の例で説明しました。要素で負のマージン値を使用して、オーバーラップ効果を作成することもできます。これらは CSS マージンのいくつかのユースケースです。

CSS でのパディングの導入

パディングは、要素の境界線と要素のコンテンツの間のスペースです。これは要素の内側のスペースであり、要素の外側の領域を制御することはできません。padding プロパティを使用して、要素のパディングを設定します。要素のパディングを表すために、4つの値、3つの値、2つの値、および 1つの値を使用できます。パディング表現は、方向の点でマージン表現に似ています。次のように説明できます。

margin: 20px 20px 20px 20px;

上記のコードは、すべての方向に 20px のパディングを設定します。

それでは、CSS パディングの実際の使用法を例を挙げて説明しましょう。ここでは、上記と同じ HTML 構造を使用します。CSS で、div を選択し、高さと幅を 200px、padding-top を 50px にします。個々のクラスを選択し、background-color プロパティにそれぞれの値を指定します。

以下の例では、上記のマージンの例とは異なり、2つのボックスが接続されています。ただし、両方のボックスの各テキストの上にスペースがあります。これはパディングが行うことです。padding-top プロパティを 20px に設定すると、テキストからボックスの上部に 50px のスペースが追加されました。

サンプルコード：

<div class="redbox"> Red Box </div>
<div class="bluebox"> Blue Box </div>

div{
 height:200px;
 width: 200px;
 padding-top:50px;
}
.redbox {
 background-color:red;
}

.bluebox {
 background-color:blue;
 color:white;
}

CSS パディングを使用して、要素のコンテンツとその境界線の間のスペースを指定できます。パディングを使用して要素のサイズを大きくすることもできます。パディング値を増やすと、コンテンツと境界線の間のスペースが増えます。その結果、要素のサイズも大きくなり、コンテンツのサイズが一定に保たれます。