div: width---300px、height---300px、border---50px、padding---50px、margin---50px
実際の幅は: 300(width)+50(padding-left) )+50(パディング右)+50(ボーダー左)+50(右ボーダー)+50(マージン左)+50(マージン右)
実際の高さ: 300(高さ)+50(パディング) -top)+50(padding-bottom)+50(border-top)+50(border-bottom)+50(margin-top)+50(margin-bottom);
テキスト部分は幅*高さです。テキスト部分 外側の青い部分がパディング、赤い部分がボーダーで、マージン部分は図には表示されません。
上記の例のコード: