margin-leftプロパティの説明
CSSのmargin-leftプロパティは、要素の左辺にあたる外側の余白を指定します。これは、CSSのボックス・モデルにおけるマージン・ボックス（Margin box）の寸法を定義するプロパティの一種です。
要素を配置すると、そこに四角形のボックスが生成されます。marginは、その四辺全ての余白を一括で制御しますが、margin-leftは左方向の寸法のみを扱います。
マージンの操作はインライン要素には効きません。負の値を指定すると、要素を重ねることもできます。各辺に対応するプロパティは以下の通りです。
- 全てのマージン：
margin - 上辺のマージン：
margin-top - 右辺のマージン：
margin-right - 下辺のマージン：
margin-bottom - 左辺のマージン：
margin-left
margin-leftに指定できる値
<length>- CSSで使用できる長さを表す単位つきの値です。ピクセル値やメートル法の単位などを使う絶対値、フォントサイズやビューポートなどを使用する相対値が指定できます。
<percentage>- マージンの寸法を包含ブロックの幅（
width）を基準に割合（%）で表します。 auto- ブラウザの自動計算を採用します。要素の左右にこの値を指定すると、均等に余白を分配するため中央に寄せられて配置されます。
margin-leftの使い方とサンプルコード
margin-leftプロパティの構文は以下の通りです。
/* <length>値 */
margin-left: 10px;
margin-left: 1rem;
margin-left: -24mm;
/* キーワード値 */
margin-left: auto;
/* グローバル値 */
margin-left: inherit;
margin-left: initial;
margin-left: revert;
margin-left: unset;
margin-leftの実例
それでは実際にmargin-leftプロパティの書き方を見ていきましょう。以下の例は、背景色を白く塗った<div>要素の中に<p>要素を配置して、マージンの値を変えた時の比較です。<p>要素にも背景色が指定されており、余白の違いを確認できます。
<section class="samp_box">
<div>
<p id="margin_1">margin-left: auto;</p>
</div>
<div>
<p id="margin_2">margin-left: 10px;</p>
</div>
<div>
<p id="margin_3">margin-left: 2rem;</p>
</div>
<div>
<p id="margin_4">margin-left: 10%;</p>
</div>
<div>
<p id="margin_5">margin: 10px 10% 2rem 0;</p>
</div>
</section>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box > div {
overflow: auto;
margin-top: 1rem;
background: #fff;
}
.samp_box p {
margin: 0;
padding: .5rem;
background-color: #09f;
color: #fff;
}
#margin_1 {
margin-left: auto;
}
#margin_2 {
margin-left: 10px;
}
#margin_3 {
margin-left: 2rem;
}
#margin_4 {
margin-left: 10%;
}
#margin_5 {
margin-top: 10px;
margin-right: 10%;
margin-bottom: 2rem;
margin-left: 0;
}