【盒子模型】

盒子模型

概念：HTML中的每一个元素都可以看做是一个盒子，如右下图所示，可以具备这4个属性。

• 内容（content）：元素的内容width/height
• 内边距（padding）：元素和内容之间的间距
• 边框（border）：元素自己的边框
• 外边距（margin）：元素和其他元素之间的间距

盒子模型如下图所示（标注：图片来源于网络）


这里给大家记个口诀，来区分margin和padding的记忆。
margin是外边距，因为外国人喜欢吸收大妈，
padding是内边距，你拍领导马屁的时候，要偷偷的拍，所以是拍内。

padding 内边距

padding包括四个方向, 所以有如下的取值:
padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距
padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;
举例：
padding: 10px 20px 30px 40px;的意思是：
top: 10px, right: 20px, bottom: 30px, left: 40px;

border 边框

边框具备宽度width;
边框具备样式style;
边框具备颜色color;

margin 外边距

margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距;
margin的四个方向：
margin-top：上内边距
margin-right：右内边距
margin-bottom：下内边距
margin-left：左内边距
margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;

如何防止出现传递问题？
给父元素设置padding-top、padding-bottom
给父元素设置border
触发BFC: 设置overflow为auto