21章：paddingとmargin

こんにちは。エンジニア大学編集部です。

前章では以下のことについて学びました。

• コンテンツについて
• mainに文字と画像のコンテンツを作成する方法

現段階では、各種メインのコンテンツは、余白なくみっちり横並びになってしまっています。

これから、コンテンツ間に余白を作り見やすくする方法について学んでいきます。

本章では、以下のことについて学びます。

• コンテンツ間に余白を作る方法
• ボックスモデルについて

コンテンツ間に余白を作る

これまで、余白を作るにはpaddingを使ってきました。

詳しくは、15章：ヘッダーの余白でpaddingについて学んでいるので、そちらも併せてご覧ください。

ではまず、以下の画像をご覧ください。

これまで使ってきたpaddingは、borderの内側の余白を作ります。

borderの外側に余白を作りたい場合には、marginを使います。

値の指定方法は、paddingの時と同じです。

marginもpaddingと同様、各方向の余白を指定したり、まとめて指定したりすることも可能です。

ボックスモデルについて

これまでに勉強してきた「border」「padding」「margin」は、ボックスモデルという概念に基づいています。

ボックスモデルとは、HTMLで定義された要素は全て、長方形の箱（ボックス）の中に納められているという考え方です。

以下の図をご覧ください。

上の図を1つのボックスと捉え、ボックスの中に「margin」「border」「padding」「要素」の4つがあるという考え方が、ボックスモデルです。

CSSでデザインをするうえで、このボックスモデルの考え方はとても重要になってきます。

borderの設置、各余白の大きさなど、ボックスモデルをイメージしながらデザインすることで、理想のデザインを作り上げていきましょう。

まとめ

本章では以下のことについて学びました。

• コンテンツ間に余白を作る方法
• ボックスモデルについて

次章からは新しく、チャプター7になります。

次章がHTML&CSSの初級者編、最後のチャプターとなります。

最後のチャプターでは、お問い合わせフォームの作成について学んでいきます。