CSSで制御する事のできるボックスエリア（範囲を持つ領域）に関する属性のリストです。ブロック要素やインライン要素のレイアウト制御等に使います。

CSS ボックス プロパティ

• margin: ★;※周りへ押し出す
• padding: ★;※内側へ押し込む
• float: ★;※左右へ寄せて回り込ませる
• clear: ★;※floatの解除
• height: ★;※ボックスの高さを指定
• width: ★;※ボックスの横幅を指定
• display: ★;※block要素・inline要素等の表示指定

margin: ★;

上下左右要素に対してマージン（押し出し空白）を指定する属性。一括で記入する際は時計回りに上右下左の順で指定できる。

マージン属性同士がぶつかるとバグが発生。解決策としてはパディング属性と併用すること。IEとFirefoxでそれぞれ症状が異なる。

/* 四方が同じ値 */
margin: 10px;

/* 上 右 下 左（12時から始まる時計回り） */
margin: 10px 5px 10px 5px;

/* 上 左右 下 */
margin: 10px 5px 10px;

/* 上下 左右 */
margin: 10px 5px;

padding: ★;

要素の内部に対してパディング（押し込む空白）を指定するプロパティ。一括で記入する際は時計回りに上右下左の順で指定できる。ボーダー要素が指定されている場合、線よりも内側を押し込むためラインは外へと膨らむ。

また、ボックスに高さ・横幅を設定している場合パディング属性の分だけ大きくなる。

/* 四方が同じ値 */
padding: 10px;

/* 上 右 下 左（12時から始まる時計回り） */
padding: 10px 5px 10px 5px;

/* 上 左右 下 */
padding: 10px 5px 10px;

/* 上下 左右 */
padding: 10px 5px;

/* 100pxのボックスにpadding属性を20px指定した場合140pxになる。 */
height: 100px;
width: 100px;
padding: 20px;

float: ★;

イメージ要素や任意の要素の横に回りこみさせたい場合に指定する属性。

この属性を指定すると周りを囲んでいるボックスは囲む力を失う。回避するにはフロート属性の指定された要素の下にclear:bothを指定した要素を置く。もしくは周りのボックスにoverflow:hiddenを指定。またはclearfixと呼ばれるハックもある。

リストを横並びにする場合にもli要素にフロート属性を指定することで表現できる。

float: left;

<!-- overflowで回避 -->
#box{
	overflow: hidden;
}
#box_in{
	height: 100px;
	width: 100px;
	float: left;
}

<!-- clearで回避 floatの次の要素へ指定 -->
#box_in{
	height: 100px;
	width: 100px;
	float: left;
}
#box_in_under{
	clear: both;
}

clear: ★;

float属性で指定された回り込みを解除する属性。フロートをかけられた要素の次（下層ではない,弟）の要素に指定する事でそれ以降の要素は回り込みが解除される。

フロート属性を指定した要素の親要素は囲む力を失うが、この属性を指定する事で回避が可能。

h2{
	float: left;
}

p{
	clear: both;
}

height: ★;

ブロック要素の高さを指定する属性。

height: 100px;

width: ★;

ブロック要素の横幅を指定する属性。

width: 100px;

display: ★;

要素の表示形式を変更する属性。値にnoneを指定すると指定された要素そのものが消える。

タグリンク要素にdisplay: blockを指定する事でリンク領域を親要素のサイズまで拡大しボタンのように指定できる。

display: block;