面试题：CSS盒模型中width、height与padding、border、margin的关系

Question

在标准盒模型下，一个元素设置width为200px，height为150px，padding为20px，border为5px，margin为10px，请问该元素在页面中实际占据的水平和垂直空间分别是多少？并解释width和height属性在这种情况下所代表的含义。

Answer 1

1. 水平空间：
   • 计算方式：width + 2 * padding + 2 * border + 2 * margin。
   • 代入数值：200 + 2 * 20 + 2 * 5 + 2 * 10 = 200 + 40 + 10 + 20 = 270px。
2. 垂直空间：
   • 计算方式：height + 2 * padding + 2 * border + 2 * margin。
   • 代入数值：150 + 2 * 20 + 2 * 5 + 2 * 10 = 150 + 40 + 10 + 20 = 220px。
3. width和height属性含义：
   • 在标准盒模型下，width代表元素内容区域的宽度，即不包含padding、border和margin的宽度。
   • height代表元素内容区域的高度，即不包含padding、border和margin的高度。