箱・余白

`margin` 外側の余白を空ける

重要度5 / 5

意味

要素の外側に空きを作る場合に使います。中の空きは padding です。上下左右をまとめて書くことも、margin-top のように方向だけ書くこともあります。

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML

<p>上の段</p>
<p>下の段。あいだに外側の余白があります。</p>

CSS

p {
  margin: 1.5rem 0;
}

プレビュー

出典: MDN Web Docs（`@mdn/browser-compat-data`）