TOP ＞ マージン・パディング・ボーダー ＞ ボックスモデルとは何だろう？
ボックスモデルとは何だろう？
ブロックレベルやインライン要素は、Webページのなかで長方形の領域を作ります。
このような領域を「ボックス」と呼びます。
ボックスを構成するのは、
- 周囲の要素との間の余白である「マージン」（margin）
- 実際にラインを引くことも出来る境界線「ボーダー」（border）
- ボーダーと内容の間の余白である「パディング」（padding）
- 実際の要素の内容
の4つで 構成されています。ボックスのイメージは下の図のようになります。
ボックスの幅や高さを指定する場合は、「width」「height」プロパティを使って指定します。このプロパティは内容の幅・ 高さを指定するもので、パディングやボーダーやマージンは計算に入りません。ただし、 ＩＥ5.5以前ではこのプロパティを間違って解釈していて、「width」「height」 プロパティのなかにborderとpaddingが含まれています。
"ボックスモデルとは何だろう？"のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
【スタイルシート】 p{width: 100px; margin: 20px; border: 5px solid #0000ff; padding: 10px;} 【HTML本文】 <html> <head> <title>ボックスモデルとは何だろう？のサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="http://www.1css.net/sample/400.css" type="text/css"> </head> <body bgcolor="#ffbbaa"> <p>内容</p> <br /> 内容を100px、ボーダーを10px、ボーダーは青色で5px、マージンは20pxで設定しています。 </body> </html> |
[
マージン・パディング・ボーダー ]
