Chap11-2 マージンとパディング

一番よく間違えられるタグについて学習します。
マージンとパディングの違いについて理解することが目的です。

marginプロパティ

タグとタグ（文章と文章）の間隔で使うプロパティで、文章や内容の見やすさ・わかりやすさに影響します。

上下に隣接するマージンの相殺

See the Pen 11-2 by Rayout-gw (@Rayout-gw) on CodePen.

See the Pen 11-2-2 by Rayout-gw (@Rayout-gw) on CodePen.

左右に隣接するマージンの相殺

See the Pen 11-2-3 by Rayout-gw (@Rayout-gw) on CodePen.

入れ子にある親と子要素のマージンの相殺

See the Pen 11-2-4 by Rayout-gw (@Rayout-gw) on CodePen.

See the Pen 11-2-5 by Rayout-gw (@Rayout-gw) on CodePen.

paddingプロパティ

タグ内・文章の周りの余白で使うプロパティで、文章や内容の見やすさ・読みやすさに影響します。

paddingはborderの内側、marginはborderの外側で、タグの見た目の大きさが変わります。

ボックス内のレイアウト

ボックス内の文章や子要素を下へ右へ移動させてレイアウトするのは、paddingを使うのが98%最適解です。
移動させたい「文章または子要素」を囲んでいる「タグまたは親要素」のpaddingを使うと良いでしょう。

改行や全角スペースで余白を作るのは絶対NG

See the Pen 11-2-6 by Rayout-gw (@Rayout-gw) on CodePen.

ボックス内はpaddingを使う

See the Pen 11-2-7 by Rayout-gw (@Rayout-gw) on CodePen.