[CSS] ボックスモデル(Box Model)の構造を理解する

テキスト文章や画像などのコンテンツ内容が表示される領域，その周辺をパディング(padding)，ボーダー(border)，マージン(margin)という4つの領域から成り立っている四角いボックスについて、その構造を理解して、各領域について概説します。

ボックスモデル(Box Model)の構造

通常テキスト文章や画像などでホームページを作る際は、以下のように、基本一つのボックスには4つの領域で構成されています。

コンテンツ内容を表示する領域
テキストや画像などが表示される領域です。横幅(width)と高さ(height)でサイズを指定できます。テキストや画像が内容となります。backgroundプロパティを指定する場合、内容領域とパディングに背景が表示されます。 width:550px; height:200px;

パディング(padding)
コンテンツ内容とボーダーの間の余白のことをいいます。背景やボーダーと一定の距離を保つよう設定します。マイナス値の指定も可能です。パディング部分にも背景が表示されます。 padding: 5px 5px 5px 5px; padding-top:5px; padding-bottom:5px;

ボーダー(border)
パディングとマージンの境にある枠線のことで、ボックスの外枠となる部分です。枠の太さや線、色などの　設定ができます。背景が表示される領域ですが、ボーダーが指定されている場合は、ボーダーが優先され表示されます。パディングと同様に四方向を一括に指定することも出来ます。 border:1px solid #000;

ボーダー(border)

パディングとマージンの境にある枠線のことで、ボックスの外枠となる部分です。枠の太さや線、色などの　設定ができます。背景が表示される領域ですが、ボーダーが指定されている場合は、ボーダーが優先され表示されます。パディングと同様に四方向を一括に指定することも出来ます。

border:1px solid #000;

マージン(margin)
ボーダーとほかの要素の間の余白になります。ここ背景は表示されません。 margin: 5px 4px 4px 5px; margin-left:5px; margin-right:5px

ボックスモデル(Box Model) SAPLE

<head>
<style>
  div.box-sample {
    width:100%;
	border: 1px solid #fa09a2;
	border-radius:3px;
    padding: 10px 5px 5px 45px;
    margin: 5px 0;
  }
</style>
</head>
<body>
<div class="box-sample">SAMPLE</div>
</body>

SAMPLE