【margin-left】左のマージン(余白)を指定

各marginの位置(ボックスの構造)

margin-leftプロパティでは、左のマージン(余白)を個別に設定することができます。 マージンをまとめて指定したい場合はmarginプロパティを使用して下さい。

margin-leftの指定方法ですが、数値、%、autoで指定する方法があります。 値としてautoを指定すると状況に応じてマージンが調整されますが、ブロックレベル要素の左右のマージンを「auto」に指定すると、どちらも同じ値となるためセンタリング(中央表示)されます。

またマージンには負の値を指定する事もでき、複数の領域を重ねて表示することなども可能です。

書式

  • margin-left : ……… 左のマージン(余白)を設定

★:数値、パーセント、auto、inherit

数値+単位
数値にpxなどの単位を付けてマージンを設定します。ただしページボックスに対して設定する場合は、emやexといった単位を使用する事はできませんので、注意して下さい。
パーセント値+%
包含ブロックの横幅に対しての割合でマージンを設定します。
auto
状況に応じてマージンが自動で調整されます。ブロックレベル要素の上下、インライン要素の上下左右のマージンに対しては「0」が設定されます。またブロックレベル要素の左右のマージンを共に「auto」とした場合は、どちらも同じ値となるため、そのボックスがセンタリングされます。

使用した時の例

.sample1 {margin-left: 40px;}
  
div{background:#DFF2FF;}
<div class="sample1">左のマージン:40px</div>

ブラウザ上の表示例

左のマージン:40px

対応ブラウザなどのデータ

初期値 0 値の継承 継承しない
適用可能な要素 すべての要素(tr,th,td,thead,tbody,tfoot,col,colgroupを除く)
メディア visual
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報