ボックスモデルについて

CSSは各要素を装飾するだけではなく各要素の位置を指定してレイアウトを決定することができます。
HTMLのそれぞれの要素はボックスと呼ばれる四角形のエリアに区切られて表示されます。
このボックスはブロックレベル要素かインライン要素を持ちます。
ブロックレベル要素とは見出し<h1>や文章<p>、リスト<li>などの縦方向に表示される要素です。
インライン要素は主にブロックレベル要素の内容として用いられる要素で文章<p>の中で用いる斜体<i>や強調<strong>等の要素です。
クループとして扱う<div>と<span>ですが<div>はブロックレベル要素で<span>はインライン要素となります。
ブロックレベル要素はインライン要素と違い高さと幅を持ちます。
このブロックレベル要素を持つボックスを配置するレイアウトをボックスモデルといいます。

ボックスのプロパティ

ボックスはCSSでプロパティを指定して表示されるブロックの形を指定できます。
ここで用いる主なプロパティはmargin、border、paddingとなります。

marginは他の要素との余白を指定します。

borderは要素の枠線を指定します。

paddingは要素の内容（コンテンツ）と枠線の間の余白を指定します。
ここでコンテンツはブロックレベル要素の高さと幅の大きさを持ちます。





この例では二つの<p>要素を並べています。
<p>要素はブロックレベル要素ですので縦方向に並びます。
CSSは縦横100pxのコンテンツの上下左右に50pxの余白を持たせて5pxの枠線で囲むものです。また二つの<p>要素は上からの60pxと下からの20pxで合計80pxの空きがあります。この二つの<p>要素を左右に並べれば（floatプロパティを用います）それぞれのmarginを合わせて120pxの間をもって表示されます。


marginは上、右、下、左方向を

margin-top: 20px;
margin-right: 40px;
margin-bottom: 60px;
margin-left: 80px;

このように指定していますが

margin: 20px 40px 60px 80px;

このようにまとめて指定することもできます。
paddingも同様に指定できます。

padding: 50px 50px 50px 50px;


borderは

線の幅　　　　border-width: 5px;
線のスタイル　border-style: solid;
線の色　　　　border-color: black;

このように指定していますが

border: 5px solid black;

このようにまとめて指定することができます。