何をする書き方？
paddingは内容と枠の間の余白、marginは枠の外側の余白です。borderは枠線。box-sizing: border-boxを使うと、指定した幅にpaddingとborderも含まれ、幅の計算を扱いやすくできます。
基本の形
padding: 内側の余白;
margin: 外側の余白;padding内容と枠の間を空ける。marginほかの要素との間を空ける。border-box幅にpaddingと枠線を含める。短い例で確かめる
style.css
p {
padding: 10px;
margin: 20px;
border: 1px solid black;
}結果
内側の余白10px、外側の余白20px、黒い枠が付きます。
準備・実行方法を確認する
HTMLのheadに <link rel="stylesheet" href="style.css"> を入れ、同じフォルダーにstyle.cssを作ります。HTMLをブラウザーで開き、保存後に再読み込みして確認します。
もう少し詳しいコードを見る
style.css
* { box-sizing: border-box; }
.card {
width: 280px;
padding: 24px;
margin: 16px;
border: 1px solid #ccd4df;
}結果
カード本体の幅は枠線込みで280px。内側に24px、外側に16pxの余白ができます。
ここで、書き換えてみよう
文字や数字を変えたら「実行する」を押します。変更したコードは、ページを移動すると元に戻ります。
一問だけ、復習しよう
「余白とボックスモデル」の書き方はどれ？
少し変えてみよう
paddingを0pxにした場合と、32pxにした場合を比べてみましょう。
つまずいたら、ここを確認
marginは背景色が塗られない外側の余白です。内側を広げたいときはpaddingを使います。
自分の言葉でメモ
記録はこのブラウザーに保存されます。