margin-leftプロパティ《ボックス外側左の余白を指定》-CSS –

marginについて

margin-leftはコンテンツボックス外側左の余白の大きさを指定し、文章を読みやすくしたり、見栄えを整えます。

本記事ではmargin-leftの基本的な動作と複数ボックスでの余白の適用について紹介します。

マージン レフト

margin-left

コンテンツ(要素)外側左の余白を指定する

コンテンツボックス外側左の余白の大きさを指定し、文章を読みやすくしたり、見栄えを整えるのにmargin-leftプロパティを使用します。

margin-leftの記述

セレクタは対象とする要素、クラス名、id名が指定できます。

カテゴリ ボックス
適用できる要素 すべての要素
継承 なし
指定できる 長さのサイズ値、パーセント値、auto
負の値(-10pxなど)の指定も可能です
初期値 0

margin-leftはボックス外側左の余白を指定する時に使用しますが、以下のように指定することでmarginでも左側の余白を指定できます。

margin-left: 10px; margin: 0 0 0 10px;

ボックスの余白に影響するプロパティ

ボックスの余白に影響するするプロパティはmargin-leftを含むmargin類のほかにborder、paddingがあります。

ボックスに影響する余白の関係性は下記図のように適用され、margin-leftはコンテンツボックス外側(border外側)左の余白を決定します。

margin-leftプロパティで指定可能な範囲

margin-left値別サンプル

「影響範囲を表示」では、margin-leftの影響範囲を見やすく表示するために背景画像(10pxの青、グレーの四角)画像を交互に表示しています。
margin-left部分に画像を指定することはできません。本記事ではmargin-left部分を見やすくするため入れ子にし親要素に背景画像を指定しています。

サンプルのコンテンツボックスはwidth:300px;、height:50px、border:5pxで指定しています。

margin-leftの値が長さのサイズ値

サンプル

【影響範囲を表示】

コンテンツボックス

【実際の表示】

コンテンツボックス

【HTML】

<div>
コンテンツボックス
</div>

【CSS】

div {
  margin-left: 10px;
  border: #FF7BAC solid 5px;
}

※「影響範囲を表示」ではmargin-leftの影響範囲を見やすくするため背景画像(10pxの四角)を親要素に指定しています。コンテンツボックスはwidth:300px;、height:50px、border:5px;で指定しています。

margin-leftの値がauto

値にauto(自動計算)を指定するとボックスを親要素に対して中央に表示することが可能になると思ってしまいますが、margin-leftプロパティでautoを指定し、margin-rightを未指定の場合、ボックスは右揃えで表示されます。
ただし、autoを使用する場合は、widthの指定が必要です。

例えば親ボックスにwidth:600px;、子ボックスにmargin-left:auto;とwidth:200px;を指定した場合、600px-200pxの400pxが左側のマージンサイズになります。

ボックスにfloatプロパティを指定している場合、autoは適用されません。

「影響範囲を表示」ではmargin-leftの影響範囲を見やすくするため背景画像(10pxの四角)を指定しています。

サンプル

【影響範囲を表示】

コンテンツボックス

【実際の表示】

コンテンツボックス

【HTML】

<div>
コンテンツボックス
</div>

【CSS】

div {
  margin-left: auto;
  border: #FF7BAC solid 5px;
}

※「影響範囲を表示」ではmargin-leftの影響範囲を見やすくするため背景画像(10pxの四角)を親要素に指定しています。コンテンツボックスはwidth:300px;、height:50px、border:5px;で指定しています。

複数ボックスがからむ時の左右のmargin(margin-left、margin-right)は足した値になる

marginの左右の値はボックスの関係性に関係なく足した値が適用されます。

marginプロパティ関連記事