このページの目次
ボックスを構成する要素
HTMLの要素は幅と高さを持った箱のような四角形の領域として表示され、この領域を「ボックス」と呼んでいます。通常の表示フローでは、これらのボックスひとつひとつが改行されて左上から下に向かって並ぶか、あるいはインラインテキストのように左から右に向かって並んで表示されます。この四角形の領域として表示された要素を意図したようにレイアウトするために、まずはこのボックスがどような「概念」でできているか理解しておきましょう。
このボックスの概念は「ボックスモデル」と呼ばれ、4つの領域から構成されています。領域は、コンテンツ（content）領域を中心に外側に向かって、パディング(padding）領域、ボーダー（border）領域、マージン（margin）領域といい、レイアウトを調整するためのプロパティが定義されています。
また、それぞれの領域は上下左右の4辺に分けられ、ひとつひとつにプロパティがあります。各辺それぞれにスタイルを適用することができることで、緻密なレイアウトをすることができます。
ボックスひとつひとつが改行されて左上から下に向かって並ぶ「ブロック」と呼ばれる標準的なボックスや、テキストのように左から右に向かって並ぶ「インライン」と呼ばれるボックスなど、HTMLの要素はいずれかのボックスとして表示されます。
ここではボックスに関連するすべてのプロパティを指定できる標準的な「ブロック」ボックスについて見ていきましょう。
ボックスの境界線border（ボーダー）領域
ボックスの内と外を分ける境界となる部分を「ボーダー」といいます。「border」関連のプロパティを使って枠線の太さや色、線の種類などの設定ができます。
境界線は「border-style（形状）」、「border-width（太さ）」、「border-color（色）」の３つのプロパティで見た目をコントロールすることができます。
p {
border-style: solid;
border-width: 10px;
border-color: #74a9f6;
}通常、境界線は表示されていません。線の種類を指定するborder-styleプロパティが指定されていない場合、境界線は表示されません。これはborder-styleプロパティの既定値が「none」になっているからです。
ボックスの内側余白padding（パディング）領域
コンテンツ内容とボーダー（枠線）の間にある余白の領域のことを「パディング」といいます。「padding」プロパティで内容とボーダーとの隙間（距離）を変更することができます。この部分はボックスの背景色や背景画像に影響される範囲になります。
p {
background-color: #000000;
padding: 30px;
}ボックスの境界と内容との隙間である背景色のある余白部分がパディングの領域です。
ボックスの外側余白margin（マージン）領域
境界線となるボーダーの外側で上下左右の隣り合う要素との余白を「マージン」といいます。「margin」プロパティで隣り合う要素との距離を変更することができます。この部分にはボックスの背景色や背景画像に影響されない透明部分で、ボックスの背後にある要素が見えます。
p {
background-color: #74a9f6;
margin: 30px;
}コンテンツ内容を表示する領域
ボックスの内容であるテキストや画像などが表示される領域で、ボックスの性質（「display」プロパティの値）によって異なりますが基本的に中身のサイズによって決まってきます。
この領域は、width プロパティ（幅）とheighプロパティ（高さ）を指定することで変更することができます。
p {
background-color: #74a9f6;
width: 250px;
height: 100px;
}