margin-left

p.test { margin-left: 50px;}
p.test1 { margin-left: auto;}
p.test2 { margin-left: -50px;}

<div style="border: solid 1px #f00;">
	<div style="margin-left: 50px; width: 200px; border: solid 1px #00f; background-color: #ff0;">ここはdiv要素です。『margin-left: 50px』、『width: 200px』と指定しています。</div>
</div>

<div style="border: solid 1px #f00; width: 300px; margin: 0 auto;">
	<div style="margin-left: -50px; width: 200px; border: solid 1px #00f; background-color: #ff0;">ここはdiv要素です。『margin-left: -50px』、『width: 200px』と指定しています。</div>
</div>

<div style="border: solid 1px #f00;">
	<div style="margin-left: auto; margin-right: auto; width: 200px; border: solid 1px #00f; background-color: #ff0;">ここはdiv要素です。『margin-left: auto』、『margin-right: auto』、『width: 200px』と指定しています。</div>
</div>

左方向のマージン(外側の余白)を指定できます。

マージンとはボーダー(境界線)の外側の余白となります。以下のボックスモデルの図を参照してください。

数値を『%』で指定した場合はその要素の『包含ブロックの幅』を基準とした相対値となります。

<div style="border: solid 1px #f00; width: 300px; margin: 0 auto;">
	<div style="margin-left: 10%; border: solid 1px #00f; background-color: #ff0;">ここはdiv要素です。『margin-left: 10%』と指定しています。包含ブロックとなる要素の幅は『300px』と指定しています。なのでこの要素の左方向のマージンの値は『30px』となります。</p>
</div>

マージンの値に負の値を指定することも可能です。

<div style="border: solid 1px #f00; width: 300px; margin: 0 auto;">
	<div style="margin-left: -50px; width: 200px; border: solid 1px #00f; background-color: #ff0;">ここはdiv要素です。『margin-left: -50px』、『width: 200px』と指定しています。</div>
</div>

左右のマージンの相殺は起こりません。マージンの相殺が起こるのは上下方向のみとなります。

左右方向の値を両方共『auto』とすると左右均等となるマージンの値が自動算出され、左右中央となる位置に配置をすることができます。ブロックレベル要素を左右中央に配置したい場合は『width』プロパティ等で横幅を指定する必要があることを忘れないようにしてください。横幅の指定がないブロックレベル要素の横幅は初期値の『100%』となりますので左右の余白が生成される隙間はありません。

<div style="border: solid 1px #f00;">
	<div style="margin-left: auto; margin-right: auto; width: 200px; border: solid 1px #00f; background-color: #ff0;">ここはdiv要素です。『margin-left: auto』、『margin-right: auto』、『width: 200px』と指定しています。</div>
</div>

左右方向で片一方だけ『auto』とした場合はもう片一方のマージンの値から算出された残りの余白の値を自動算出し反映します。

<div style="border: solid 1px #f00; width: 500px;">
	<div style="margin-left: auto; margin-right: 50px; width: 200px; background-color: #ff0;">ここはdiv要素です。『margin-left: auto』、『margin-right: 50px』、『width: 200px』と指定しています。包含ブロック(親要素)の大きさは『500px』です。左方向のマージンに『auto』、右方向のマージンに『50px』と指定しているため、左方向のマージンは『250px』となります。</div>
</div>

『display』プロパティが『inline』となっているインラインレベル要素は左右のマージンのみ指定することができ、上下のマージンは指定できません。そして左右方向に『auto』と指定しても左右均等となる値が自動算出されることはありませんので中央配置されることはありません。

<p style="border: solid 1px #f00;">
	<span style="background-color: #ff0; margin-left: 50px;">ここはspan要素です。『margin-left: 50px』と指定しています。インラインレベル要素のため上下のマージンは効きません。</span>
</p>
<p style="border: solid 1px #f00;">
	<span style="background-color: #ff0; margin-left: auto; margin-right: auto;">ここはspan要素です。『margin-left: auto』、『margin-right: auto』と指定していますが、インラインレベル要素のため左右中央に配置されることはありません。</span>
</p>

※『margin』プロパティはこちらでも詳しく解説を行っています。