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;
posted on 2023-01-05 13:38 Mikasa-Ackerman 阅读(630) 评论(0) 编辑 收藏 举报