1.10 盒子模型

• 举例
• Content 元素内容
• Margin 外边距

Margin -> Border -> Padding -> Content

举例

<p style="height: 30px;background-color: lightgray;margin: 10px;border: 20px solid greenyellow;padding: 30px;"> content </p>

• Content：文本元素 content，高度 30px；
• Padding：30px；四周统一设置；
• Border：20px；四周统一设置；
• Margin：10px；四周统一设置；

p 元素实际高度 Margin + Border + Padding + Content + Padding + Border + Margin = 150px；
Content 实际位置：
x = Margin + Border + Padding = 60px；
y = Margin + Border + Padding = 60px；
w = 100% - (Margin + Border + Padding) * 2
h = 30px;

Content 元素内容

• 对比基础；

<div>
    <p style="margin: 0;height: 30px;">test p</p>
</div>

// p 元素就是 div 元素的内容；

注：默认 p 元素存在上下外边距都为一个空行，为了效果设置了 margin:0；

Margin 外边距

• 添加 margin，使 div 元素外围缩进

<div style="margin: 10px;">
    <p style="margin: 0;height: 30px;">margin</p>
</div>