- margin：領域間に余白を与える
- padding：領域内余白を与える
- float,clear:回り込みを指定する
- width、height：横幅や高さを指定する
margin
領域間の上下左右に余白を与えます。
マージンの大きさは、数値+単位（px、他）か %（割合）、auto（自動）で指定します。
paddingと似ていますが、下図のように領域と領域の余白がmargin、領域内の余白がpaddingとなっています。
下記サンプルでは、上下左右に１０ｐｘの余白を与えています。水色の部分が余白の部分です。
test1 <div> <img class="margin10" src=test.jpg" alt="test" /> </div> test2
#margin10{
margin:10px;
}
padding
領域内の上下左右に余白を与えます。
パディングの大きさは、数値+単位（px、他）か %（割合）、auto（自動）で指定します。
paddingと似ていますが、下図のように領域と領域の余白がmargin、領域内の余白がpaddingとなっています。
下記サンプルでは、上下左右に１０ｐｘの余白を与えています。水色の部分が余白の部分です。
test1 <div id="padding10">padding_text</div>
test2
#padding10{
padding:10px;
}
float,clear
float:コンテンツの回り込みを指定します。
指定値は下記の通りです。
| 指定値 | 機能 |
|---|---|
| left | 左側に配置し、右に回り込ませる。 |
| right | 右側に配置し、左に回り込ませる。 |
| none | 配置と回り込みを行わない。 |
clear:コンテンツの回り込みを解除します。
指定値は下記の通りです。
| 指定値 | 機能 |
|---|---|
| none | 回り込みを解除しない。 |
| left | 左に配置した要素に対する回りこみを解除する |
| right | 右に配置した要素に対する回りこみを解除する |
| both | すべての要素に対する回りこみを解除する |
下記サンプルでは、画像に「float:left」をして「ああああああああ」を右に回り込ませています。
「いいいいいいいいいいい」が回り込まないのは、「clear:both」によって回り込みを解除しているからです。
あああああああああああああああああああああああああああああああ
いいいいいいいいいいいいいいいいいいいい
<img class="float_left" src="test.jpg" alt="test" /> <p>あああああああああああああああああああああああああああああああ</p>
<p class="float_clear">いいいいいいいいいいいいいいいいいいいい</p>
.float_left{
float:left;
}
.float_clear{
clear:both;
}
width、height
width は横幅、height は高さを指定するプロパティです。このプロパティを使って、領域の大きさを指定することができます。
それぞれ 数値+単位（px、他）か %（割合）で指定します。
※デフォルトは auto（自動）です。（例：width: auto）
下記サンプルの説明を各番号ごとに説明いたします。
①高さは１００pxで、横幅は、親要素である薄い青色の横幅に対する割合のため、丁度半分のところ（水色の部分）が、「width: 50%; height: 100px;」の領域になります。
②①同様横幅は、親要素の５０％の幅で、高さの設定がないので、文字の高さがそのまま領域の高さになります。
③①の領域のさらに５０％の領域を指定しているので、幅は下記のようになります。高さは②と同様です。
②横幅50%
③横幅50%
<div class="box_width50_100"> ①横幅50%×高さ100px </div>
<p class="box_width50">②横幅50%</p>
<div class="box_width50_100">
<p class="box_width50">③横幅50%</p>
</div>
.box_width50_100 {
width: 50%;
height: 100px;
background-color: #85b9e9;
}
.box_width50 {
width: 50%;
background-color: #CC3366;
}