div盒子究竟占多大面积_html/css_WEB-ITnose

div：width---300px,height---300px,border---50px,padding---50px,margin---50px

实际的宽度是：300(width)+50(padding-left)+50(padding-right)+50(border-left)+50(border-right)+50(margin-left)+50(margin-right); 

实际高度:300(height)+50(padding-top)+50(padding-bottom)+50(border-top)+50(border-bottom)+50(margin-top)+50(margin-bottom); 

文字部分是width*height,文字部分外蓝色部分是padding,红色部分是border,margin部分在图中没显示。

 

上边示例的代码：