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

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

padding：　border幅：　margin：　css変更

/* ---基本サイズ--- */

width:200px;

height:150px;

background: #ccffcc;

padding: 0px;

border: 1px solid blue;

margin: 0px;