HTML新手入门之盒模型

认识盒模型

在HTML中可以看作是一个矩形的盒子，是一个放内容的容器，每个矩形都有内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。
盒模型结构图

盒模型的组成及属性

1.每个盒模型都有宽度和高度
宽度：width
高度：height
2.为了调整内容在盒子中显示的位置，我们常常需要给元素设置内边距、边框、外边距等，具体属性如下。
内边距：
padding-top：上部内间距
padding-right：右边内间距
padding-bottom：下部内间距
padding-left：左边内间距
padding属性可以同时设置四个方向的值，其方向顺序为顺时针，及上右下左的顺序设置

边框：
border-top：上边框
border-right：右边框
border-bottom：下边框
border-left：左边框
border属性可以同时设置四个方向的值，其方向顺序为顺时针，及上右下左的顺序设置

外边距：
margin-top：上部外间距
margin-right：右边外间距
margin-bottom：