在
HTML
页面中,
每一个元素
都是一个
规则的
矩形
,因此每
一个元素都由一个
盒子模型
来表示,
盒子模型
由
4
个区域组成
:
ü
content
box
(内容区域
)
ü
padding
box
(内边距区域
)
ü
border
box
(边框区域
)
ü
margin
box
(外边距区域)
#box{
width: 200px;
height: 200px;
background-color: red;
padding: 50px;
border: 10px solid green;
margin: 50px 0 0 50px;
}
<div id="box"></div>
width: 200px;
height: 200px;
background-color: red;
padding: 50px;
border: 10px solid green;
margin: 50px 0 0 50px;
}
<div id="box"></div>
![](https://i-blog.csdnimg.cn/blog_migrate/e88fe58f9f9c840c918cf22d9f91642f.jpeg)