目で見るボックスレイアウトとは？

目で見るボックスレイアウトとは、動的にスタイルを変更していくことでボックスレイアウトの概要の理解を促す目的で作成しました。

sample
sample02
文字の色(color)：
文字サイズ(font-size)：
行間(line-height)：
枠線の色(border-color)：
枠線の太さ(border-width)：
背景の色(background-color)：
 上右下左
外余白(margin)：
内余白(padding)：
幅(width)：
高さ(height)：
Float：left: right: none:
設定 クリア
文字の色(color)：
文字サイズ(font-size)：
行間(line-height)：
枠線の色(border-color)：
枠線の太さ(border-width)：
背景の色(background-color)：
 上右下左
外余白(margin)：
内余白(padding)：
幅(width)：
高さ(height)：
Float：left: right: none:
設定 クリア