箱・余白

`padding` 内側の余白を空ける

重要度5 / 5

意味

枠の内側、文字や子要素のまわりに空きを作る場合に使います。要素どうしの外側の距離は margin です。

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

HTML

<p>内側に余白があります。</p>

CSS

p {
  padding: 1rem;
  background: #efeef8;
}

プレビュー

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