CSSでpaddingで余白を付ける方法｜内側の余白

📌

結論

padding で要素の内側に余白を作れます

📝 実際のコードはこちら

p { padding: 16px; }

これで段落テキストの周りに16pxの余白ができます。窮屈さがなくなり、読みやすくなります。

paddingとmarginの違い

CSSの余白は2種類あります。初心者がよく混乱するポイントです。

プロパティ	位置	背景色
`padding`	ボーダーの内側	背景色が適用される
`margin`	ボーダーの外側	透明（背景色なし）

イメージで言えば、padding = 額縁の中のマットmargin = 額縁と壁の隙間です。

📝 実際のコードはこちら

padding: 16px;          /* 上下左右すべて */
padding: 8px 16px;      /* 上下 左右 */
padding: 8px 16px 24px 32px; /* 上 右 下 左（時計回り） */

・padding は内側、margin は外側の余白・padding: 16px で四方に均等な余白・個別指定も可能（時計回り）

pタグにpadding: 16pxを付けてみましょう。

🧪 ここで試せます ─ 壊しても大丈夫！

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

■ 演習

pタグにpadding: 16px を付けてください。

詰まったらヒント

padding で内側の余白を指定します。