CSS - 设置内边距padding，复合写法，内边距会影响盒子大小的问题，设置内边距失效的情况，设置外边距margin，让盒子水平居中，外边距塌陷问题，解决父子关系外边距塌陷的问题

1.设置内边距

/*设置上内边距*/
padding-top: 20px;

/*设置下内边距*/
padding-bottom: 20px;

/*设置左内边距*/
padding-left: 20px;

/*设置右内边距*/
padding-right: 20px;

属性值可以为：auto，px，% 规定基于父元素的宽度的百分比的内边距

 

2.复合写法

/*设置上下左右内边距*/
padding: 4px;

/*设置上下内边距 左右内边距*/
padding: 4px 4px;

/*设置上内边距 左右内边距 下内边距*/
padding: 4px 2px 4px;

/*设置上内边距 下内边距 左内边距 右内边距*/
padding: 4px 4px 4px 4px;

 

3.设置内边距会影响盒子实际大小的问题

盒子设置了宽度和高度时，设置内边距会影响盒子实际的大小

盒子没有设置宽度与高度时，设置内边距不会影响盒子实际的大小

 

4.设置内边距失效的情况

如果盒子本身没有宽度与高度(如行内元素) 此时padding会失效

 

1.设置外边距

四个复合写法设置上下左右外边距与padding的复合写法一致

/*设置上外边距*/
margin-top: 10px;

/*设置下外边距*/
margin-bottom: 10px;

/*设置左外边距*/
margin-left: 10px;

/*设置右外边距*/
margin-right: 10px;

属性值 auto，px，% 规定基于父元素的宽度的百分比的外边距

 

2.让块元素，行内元素，行内块元素水平居中

给块元素添加maring: 0 auto

margin: 0 auto;

给行内元素，行内块元素的父类添加text-align：center

text-align: center;

 

3.外边距塌陷问题

(1)有浮动的元素不会出现外边距塌陷问题

(2)父子关系出现外边距塌陷情况 margin-top：

情况1 子元素中设置了margin-top 而父元素没有设置，此时子元素离父元素的margin-top不变，父元素外边距会发生改变，父元素的margin-top等于子元素设置的margin-top

情况2 如过子元素与父元素都设置了margin-top，父元素margin-top的值为子父元素中margin-top的最大的值

(3)兄弟关系出现外边距塌陷的情况：

上元素使用margin-bottom，下元素使用maring-top 就会发生外边距塌陷，上下元素之间的距离为最大的值

 

4.解决父子关系外边距塌陷的问题

给父元素定义上边框，给父元素定义上内边距，overflow: hidden;

border-top: 1px solid transparent;

padding-top: 1px;

overflow: hidden;