ボックスは主に余白設定などに使用されます。まずは、図をみてボックスとは何か確認してみましょう。
| 内容領域 | テキストなど、要素の内容が表示される領域です。 |
| パディング （padding） |
要素の内容が表示させる部分と枠線との間の余白の領域です。 |
| 枠線 | 要素の周りに表示される枠で、パディングの外枠に設定されます。 |
| マージン （margin） |
枠線の外側に設定される余白の領域です。マージンもパディングと同じで％ やpxといった単位の指定をする必要があります。 |
練習（margin）
下の画像のようにメモ帳に入力して、HTMLのファイルを作成します。
次にCSSファイルを作成します。marginは枠線の外の部分の余白になります。なので練習では、わかりやすいようにborder:solid 2px #5b94f0を入力して枠線を表示させています。solidは実線のことで、この部分に枠線の種類を入れることによって指定することができます。2pxは枠線の太さ、最後のところの#5b94f0は色の指定をしています。これらは変更することができます。また、２つ以上の宣言を指定するときは、宣言が終わるごとに;(セミコロン)を入れます。最後のところには;(セミコロン)は必要ありません。
HTMLファイルとCSSファイルが作成できたならブラウザで表示させてみましょう。表示させてみると余白ができているはずです。確認できれば100pxを違う数字に変更してどのくらい変わるのか試してみましょう。
また、このページの一番上にある画像のmargin-top、margin-bottom、margin-left、margin-rightのように、marginのあとにtop（上の余白）、bottom（下の余白）、left（左の余白）、light（右の余白）を指定すことによってより細かく設定することができます。
練習（padding）
次にpaddingの余白を確認してみましょう。先ほどmarginで使用したHTMLファイルを使用するので削除しないでください。では、CSSを作成していきましょう。
marginと同様にCSSファイルに入力していきます。
marginで作成したHTMLファイルをブラウザで表示してみましょう。marginとは違い、今度は枠線の内側の余白が変更されたことが確認できます。
marginと同じように、padding-top、padding-bottom、padding-left、padding-rightを使用して、paddingも細かく指定することができます。
下の画像と同じものを作成してください。問題画像の下に問題文があるので使用してください。
条件…HTMLファイルでは<h1>、<p>のみ、CSSファイルではマージン、パディングを使用して余白をいれてください。フォントサイズは12px、枠線は実線にして2pxにしてください。色は#ba55d3で指定してください。
蒸しパンの作り方（4個）
材料…薄力粉（100g）、砂糖（35g）、ベーキングパウダー（4g）、卵（1/2）、塩（少々）、水（
65g）
下準備…薄力粉はふるいにかけておきましょう。蒸しパンなので蒸し器が必要です！準備しておい
てくださいね。
１、はじめに生地を作ります。卵、砂糖、水をボールにいれ、泡立て器でよくかき混ぜます。
２、よくかき混ぜた生地に薄力粉を加え、すばやくかき混ぜます。かき混ぜすぎに注意して注意し
てください。
３、できれば、型に流し込み蒸し器で１５分、強火で蒸します。
出来上がり☆