その他│MARGIN

マージン

ここでは、margin　と　padding　について掲載

例えば、page-body　の中に　leftpage　があり、leftpage内に　ページ1　と書かれていたとする
この場合、margin　と　padding　のイメージは下のようになる

●記述の方法は、
margin:1px 1x 1px 1px;　と書くと、上右下左の順で　1px のマージンをとる、という意味
下表の左と右は同じ意味になる（paddingも同様）

margin:1px;	margin:1px 1x 1px 1px;
margin:1px 2px;	margin:1px 2px 1px 2px;
margin:1px 2px 3px;	margin:1px 2px 3px 2px;
margin-top:1px;	margin:1px 0px 0px 0px;
margin-bottom:1px;	margin:0px 0px 1px 0px;
margin-right:1px;	margin:1px 0px 0px 0px;
margin-left:1px;	margin:0px 0px 0px 1px;

●いくつか例をあげて、どう見えるか　比較してみる

HTML文が下のように書かれていたとし、leftpage　の背景画像に　blue.jpg　を使ったとする

<div id="leftpage">
ページ1<br>
ページ2<br>
ページ3<br>
</div>

blue.jpg

●すべて　0　の場合

#leftpage {
	float:left;
	width:120px;
	text-align:left;
	color:white;
	background-image:url("blue.jpg");
	background-repeat:repeat-y;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}

●marginの上と左が　20　の場合

#leftpage {

	途中略

	margin:20px 0px 0px 20px;
	padding:0px 0px 0px 0px;
}

●paddingの上と左が　20　の場合

#leftpage {

	途中略

	margin:0px 0px 0px 0px;
	padding:20px 0px 0px 20px;
}

●marginの上と左が　20　で、paddingも上と左が　20　の場合

#leftpage {

	途中略

	margin:20px 0px 0px 20px;
	padding:20px 0px 0px 20px;
}

慣れるまでは、上のように　margin　と　padding　を並べて書き、いろいろと数字を入れてみると、見え方の変化が理解できる

---- End ----

↑PageTop　その他にもどる