前端-css样式外边距(margin)和内边距(padding)⼀.margin:外边距;设置对象四边的外延边距。
margin: 20rpx 10rpx 25rpx 10rpx :如果提供全部四个参数值,将按上、右、下、左的顺序作⽤于四边。
margin:20rpx:如果只提供⼀个,将⽤于全部的四边。
margin:20rpx 20rpx:如果提供两个,第⼀个⽤于上、下,第⼆个⽤于左、右。
margin:20rpx 20rpx 10rpx:如果提供三个,第⼀个⽤于上,第⼆个⽤于左、右,第三个⽤于下。
某些相邻的margin会发⽣合并,称之为margin折叠,具体的现象就如果两个块级元素都设置了margin,那取两者之间的最⼤值做为两个元素的外边距。
注意:margin折叠常规认知:
margin折叠只发⽣在块级元素上;
浮动元素的margin不与任何margin发⽣折叠;
设置了属性且值不为visible的块级元素,将不与它的⼦元素发⽣margin折叠;
绝对定位元素的margin不与任何margin发⽣折叠;
根元素的margin不与其它任何margin发⽣折叠.
⼆.padding:内边距:设置对象四边的内部边距。
padding: 20rpx 10rpx 25rpx 10rpx :如果提供全部四个参数值,将按上、右、下、左的顺序作⽤于四边。
padding:20rpx:如果只提供⼀个,将⽤于全部的四边。
padding是外边距还是内边距padding:20rpx 20rpx:如果提供两个,第⼀个⽤于上、下,第⼆个⽤于左、右。
padding:20rpx 20rpx 10rpx:如果提供三个,第⼀个⽤于上,第⼆个⽤于左、右,第三个⽤于下。
三.margin-top,margin-right,margin-bottom,margin-left对应的分别是上右下左外边的距离,可取值:auto/数值/百分⽐。
四.padding-top,padding-right,padding-bottom,padding-left对应的分别是上右下左内边的距离,可取值:auto/数值/百分⽐。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论