floatを使ってレイアウトを構築する際、要素のpaddingやmarginの計算が欠かせません。以前、ボックス要素でpaddingやmarginの値が正しく反映されないIEのバグがありましたが、要素の占有する縦横のサイズが、どのように変化するか再確認のために作成しました。

次の各フィールドに数値を入れて「css変更」をクリックすると、サンプルボックスのcssに反映します。数値の合計が40(片側)を超えると、「基本サイズ」表示はボックスの下に回り込みます。
また、下側の(1)から(4)までの各ボタンをクリックすると、そのボタンの内容で占有する縦横のサイズを表示します。(1)から(4)までのタイトルは、使用しているメソッドです。

padding: border幅: margin: 


サンプルボックス

/* ---基本サイズ--- */
width:200px;
height:150px;
background: #ccffcc;
padding: 0px;
border: 1px solid blue;
margin: 0px;


(1)outerWidth(true)、outerHeight(true)

占有する横サイズ(px):
占有する縦サイズ(px):

(2)outerWidth()、outerHeight()

占有する横サイズ(px):
占有する縦サイズ(px):

(3)innerWidth()、innerHeight()

占有する横サイズ(px):
占有する縦サイズ(px):

(4)width()、height()

占有する横サイズ(px):
占有する縦サイズ(px):
戻るボタン