CSSマージン

タグがあり、このタグにはThis is a boxというテキストが含まれています。 。

タグのクラス名はboxです。 、これはboxのスタイルを意味します CSSファイルの

要素に適用されます。

タグには、上マージン50ピクセル、左マージン30ピクセル、右マージン40ピクセル、下マージン40ピクセルが割り当てられています。また、

タグに幅1pxの赤い実線の境界線を付けました。上の画像でわかるように、マージンによって

ボックスの境界と青いボックスの間にギャップが生じています。余白がなければ、これらのボックスは互いに接近します。

CSSマージンの速記

上記の例では、4行のコードを使用して、ボックスに適用するマージンを指定しました。 marginプロパティを使用すると、コードをより効率的にすることができます。

marginプロパティは、前に説明した4つのサブプロパティの省略形です。このプロパティを使用すると、複数行ではなく、1行のコードでボックスのマージンを指定できます。

マージンの省略形に使用する構文は、指定する値の数によって異なります。指定できる値の最小数は1つで、最大値は4つです。考えられるすべてのユースケースでmarginshorthandプロパティを使用する方法の例を分解してみましょう。

4つの値

個々のマージンサブプロパティを使用して4つの異なるマージン値を持つボックスを作成する代わりに、マージンの省略形プロパティを使用して4つの値を指定できます。

marginプロパティで4つの値を指定した場合、マージンが表示される順序は次のとおりです。

• 最初の値は上マージンです。
• 2番目の値は右マージンです。
• 3番目の値は下マージンです。
• 4番目の値は左マージンです。

上マージンが25ピクセル、右マージンが25ピクセル、下マージンが50ピクセル、左マージンが60ピクセルのボックスを作成するとします。このコードを使用してこれを行うことができます：

box {
	margin: 25px 25px 50px 60px;
border: 1px solid red;
}

コードは次のようになります：

この例では、上記で指定した値に基づいて、各エッジに異なるマージンを持つ内部ボックスを作成しました。また、内側のボックスを幅1pxの赤い実線の余白で囲みました。さらに、以前の青いボックスのコードを再利用して、ボックスに適用した余白のサイズを示します。

3つの値

上マージンと下マージンを変えたいが、ボックスの左右に同じマージンを使用する場合は、marginプロパティを使用して、3つの値を指定できます。

指定した3つのマージンがボックスに適用される順序は次のとおりです。

• 最初の値は上マージンです。
• 2番目の値は、要素の右側と左側のマージンです。
• 3番目の値は下マージンです。

ボックスの上部に50ピクセルのマージン、ボックスの左右に25ピクセルのマージン、ボックスの下部に60ピクセルのマージンを持つボックスを作成したいとします。次のコードを使用して、これらのマージンを持つボックスを作成できます。

コードは次のようになります：

この例では、上記で指定した値に基づいて、各エッジに異なるマージンを持つ内部ボックスを作成しました。また、内側のボックスを幅1pxの赤い実線の余白で囲みました。さらに、以前の青いボックスのコードを再利用して、ボックスに適用した余白のサイズを示します。

3つの値

上マージンと下マージンを変えたいが、ボックスの左右に同じマージンを使用する場合は、marginプロパティを使用して、3つの値を指定できます。

指定した3つのマージンがボックスに適用される順序は次のとおりです。

• 最初の値は上マージンです。
• 2番目の値は、要素の右側と左側のマージンです。
• 3番目の値は下マージンです。

ボックスの上部に50ピクセルのマージン、ボックスの左右に25ピクセルのマージン、ボックスの下部に60ピクセルのマージンを持つボックスを作成したいとします。次のコードを使用して、これらのマージンを持つボックスを作成できます。

.box {
	margin: 50px 25px 60px;
border: 1px solid red;
}

コードは次のようになります：

ご覧のとおり、内側のボックスの左側と右側には同じマージン値（25px）があり、上部と下部には独自のマージン（それぞれ、50pxと60px）があります。

コードでは、マージンが適用される場所を示すために、内側のボックスの周りに赤い境界線も定義しました。また、最初の例のコードを再利用して、内側のボックスの周囲にマージンが作成したギャップを示す青いボックスを作成します。

2つの値

ボックスの上部と下部に同じマージン値を設定し、ボックスの右側と左側に別の値を設定する場合は、marginプロパティを使用して2つの値を指定できます。

指定した値が要素に適用される順序は次のとおりです。

• 最初の値は、ボックスの上部と下部のマージンです。
• 2番目の値は、ボックスの右側と左側のマージンです。

垂直方向のマージンが50ピクセル、水平方向のマージンが30ピクセルのボックスを作成するとします。このボックスは、次のCSSスタイルを使用して作成できます。

.box {
	margin: 50px 30px;
border: 1px solid red;
}

コードは次のようになります：

ボックスの上部と下部には50ピクセルの余白があり、左側と右側には両方とも30ピクセルの余白があります。

コードでは、余白のサイズを示すために、内側のボックスの周りに赤い境界線も指定しました。また、前の例のコードを再利用して、内側のボックスと外側のボックスの間にマージンが作成するスペースを示す青いボックスを作成します。

1つの値

ボックスのすべての辺に同じマージンを持たせたい場合は、marginプロパティを使用するときに1つの値を指定するだけで済みます。指定する値は、ボックスのすべての境界線の周囲に設定されたマージンになります。

すべての境界線の周りに50pxの単一マージンを持つボックスを作成するとします。次のコードを使用してこれを行うことができます：

.box {
	margin: 50px;
	border: 1px solid red;
}

コードは次のようになります：

ボックスのすべての境界線には50pxの余白があります。ボックスの周囲に赤い境界線を指定して、余白がボックスの境界線の外側に適用されていることを示します。また、余白をわかりやすく示すために赤いボックスが配置された青いボックスを作成しました。

マージン継承

継承値は、親要素からマージンを継承するために使用されます。

内側のボックスのマージンを外側のボックスのマージンと同じに設定するには、継承値を使用できます。親要素のマージンを変更すると、子要素（親要素内のボックス）のマージンが自動的に調整されるため、継承値は便利です。

親要素の左マージンが50pxのボックスを設計しているとします。親要素内に含まれるボックスに同じマージン値を持たせる必要があります。このタスクを実行するには、次のコードを使用できます。

.box {
	margin-left: inherit;
	border: 1px solid red;
}

.outer {
	margin-left: 50px;
	border: 1px solid blue;
}

コードは次のようになります：

私たちの外箱（青い境界線のあるもの）の左マージンは50pxです。さらに、内側のボックス（赤い境界線のあるボックス）の左マージンは50ピクセルで、親要素から継承されています。

マージン自動

auto値は、要素をコンテナ内で水平方向に中央揃えするために使用されます。

自動値により、定義した値に基づいて内部要素が特定の幅を占めるようになり、残りのスペースが左右の余白に分割されます。

500px幅のボックス内に250px幅のボックスを作成したとします。 autoキーワードを使用してマージンを作成した場合、125pxのマージンがボックスの左右両方に適用されます。これは、次の式を使用して計算しました。

(Outer Box Width - Inner Box Width) / 2

この場合、次の合計を使用して、自動生成されたマージンの側面を計算しました。

(500 - 250) / 2

この問題に対する答えは125です。これは、ボックスの左マージンと右マージンの両方に適用されるマージン値です。これらの寸法を使用するボックスの例を次に示します。

index.html

<div class="outer">
<p class="box">
	This is a box.
</p>
</div>

styles.css

.box {
	width: 250px;
	margin: auto;
	border: 1px solid red;
}

.outer {
	width: 500px;
	border: 1px solid blue;
}

コードは次のようになります：

ご覧のとおり、内側のボックス（赤い境界線のあるボックス）の左側と右側の両方に等しいマージンが作成されています。つまり、内側のボックスは水平方向の中央に配置されます。これは、margin：autovalueを使用して内部ボックスのマージンを指定したためです。

この例では指定しなかったため、内側のボックスの上端または下端に余白はありません。

結論

CSSのmarginプロパティは、要素の境界線とWebページ上の他の要素の間にスペースを作成するために使用されます。

このチュートリアルでは、例を参照して、CSSのmarginプロパティの使用方法と、その4つのサブプロパティを使用して、要素の境界線とWebページ上の他の要素の間にスペースを作成する方法について説明しました。これで、プロのようにCSSマージンプロパティの使用を開始するために必要なツールを使用できるようになりました。