–margin-leftはコンテンツボックス外側左の余白の大きさを指定し、文章を読みやすくしたり、見栄えを整えます。本記事ではmargin-leftの基本的な動作と複数ボックスでの余白の適用について紹介します。レフトmargin-leftコンテンツ(要素)外側左の余白を指定するコンテンツボックス外側左の余白の大きさを指定し、文章を読みやすくしたり、見栄えを整えるのにmargin-leftプロパティを使用します。セレクタは対象とする要素、クラス名、id名が指定できます。長さのサイズ値、パーセント値、auto負の値(-10pxなど)の指定も可能です初期値0margin-leftはボックス外側左の余白を指定する時に使用しますが、以下のように指定することでmarginでも左側の余白を指定できます。10px;ボックスの余白に影響するプロパティボックスの余白に影響するするプロパティはmargin-leftを含むmargin類のほかにborder、paddingがあります。ボックスに影響する余白の関係性は下記図のように適用され、margin-leftはコンテンツボックス外側(border外側)左の余白を決定します。(10pxの青、グレーの四角)画像を交互に表示しています。margin-left部分に画像を指定することはできません。本記事ではmargin-left部分を見やすくするため入れ子にし親要素に背景画像を指定しています。サンプルのコンテンツボックスはwidth:300px;、height:50px、border:5pxで指定しています。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の四角)を指定しています。5px;}※「影響範囲を表示」ではmargin-leftの影響範囲を見やすくするため背景画像(10pxの四角)を親要素に指定しています。コンテンツボックスはwidth:300px;、height:50px、border:5px;で指定しています。複数ボックスがからむ時の左右のmargin(margin-left、margin-right)は足した値になるmarginの左右の値はボックスの関係性に関係なく足した値が適用されます。