要素の左辺にマージン(余白)を指定する

CSS - margin-left

概要

CSSプロパティ「margin-left」は、要素の左辺にマージン(余白)を指定することができます。このマージン領域についてですが、これは要素の外側に対して行われます。対して内側に余白をつけたい場合は padding プロパティを利用します。

<div>
  <p class="margin-left">この要素の左辺にマージンが10px指定されてます</p>
</div>
<style>
* {
  margin: 0;
  padding: 0;
}
div {
  background-color: #def;
  border: 1px solid #000;
}
p {
  background-color: #fff;
}
.margin-left {
  margin-left: 10px;
}
</style>

値の指定方法

{ margin-left: キーワード, パーセント, 値(1つから4つ)}

実数値 + 以下のような単位で指定します。マイナス値も指定可能です。

説明
auto 適切な値に置き換えられます。
px, em, %などで指定。マイナス値も指定可能。

値の単位の詳細は以下の通りです。

単位説明
pxpxとは画面の1画素(ピクセル)のサイズを1とする単位です。実際に表示されるサイズはモニターの解像度により変化します。
em親要素を起点とする文字の高さを1とする単位です。1emは1文字分となります。
%親要素の幅を基準に割合を%値で指定した単位です。

4辺の値について

要素の外側4辺というのは「上」、「下」、「左」、「右」を指し、まとめて記述することも、一つづつ指定することも可能です。値が1つの場合はその値が4辺全てに反映され、2つの値をいれると「上下」、「左右」に反映されます。更には、4つの値を入れた場合は「上」「右」「下」「左」と、時計回りの順序で指定が反映されます。

説明
margin: 5px 「上下左右」に5pxの余白を指定します。
margin: 5px 10px 「上下」に5px、
「左右」に10pxの余白を指定します。
margin: 5px 10px 15px「上」に5px、
「左右」に10px、
「下」に15pxの余白を指定します。
margin: 5px 10px 15px 20px 「上」に5px、
「右」に10px、
「下」に15px、
「左」に20pxの余白を指定します。

使用例

並んだ画像の左側に10pxの余白をつくります。

<div>
<img src="https://www-creators.com/wp-content/uploads/2017/10/sample.jpg" width="100">
<img src="https://www-creators.com/wp-content/uploads/2017/10/sample.jpg" width="100">
<img src="https://www-creators.com/wp-content/uploads/2017/10/sample.jpg" width="100">
</div>
<style>
* {
  margin: 0;
  padding: 0;
}

img {
  margin-left: 10px;
}
</style>

仕様書

CSS Level 1

CSS Level 2 (Revision 1)

関連CSSプロパティ