要素に余白を入れる

余白を入れる

要素に余白を作りたい場合は、borderの内側と外側のどちらに余白を作るかで指定するプロパティが変わってきます。

内側に余白を作る

paddingを用います。
padding: 値;とすると、上下左右すべての方向にその大きさの余白が追加されます。

index.html

<div>
  hoge
</div>

style.css

div {
  padding: 20px;
}

余白を入れる方向を指定する

上下左右ではなく、ある方向のみに余白を指定したい場合もあります。
その場合は、padding-top: 値;などとすると、その方向のみに余白が追加されます。
他にpadding-bottom、padding-left、padding-rightなどがあります。

style.css

div {
  padding-top: 20px;
}

まとめて指定する

指定したい値が方向ごとに異なる場合、個別で指定する方法もありますが、まとめて書くことも可能です。
値を4つ、スペース区切りで指定した場合、「上」「右」「下」「左」の順で適用されます。(上から時計回りです)
値を2つ指定した場合、「上下」「左右」の順に適用されます。

style.css

div {
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}

style.css

div {
  padding: 20px 10px 20px 10px;
}

style.css

div {
  padding-top: 20px 10px;
}

外側に余白を作る

marginを用います。
値の指定の方法は、paddingと同じです。

index.html

<div>
  hoge
</div>

style.css

div {
  margin: 20px;
}

ボックスモデル

border padding margin は、ボックスモデルという概念に基づいています。

HTMLの全ての要素には、border（初期状態では表示されない）があり、その外側の余白はmargin, 内側の余白はpaddingです。