版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/itwangyang520/article/details/78274915
margin和padding的高级用法
margin是设置元素外边距的属性,W3C官方解释为:围绕在元素边框的空白区域是外边距。
设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用margin属性,
这个属性接受任何长度单位、百分数值甚至负值。Padding是设置元素内边距的属性,
W3C的官方解释为:元素的内边距在边框和内容区之间。
控制该区域最简单的属性是 padding 属性。CSS padding 属性定义元素边框与元素内容之间的空白区域。
Margin和padding均有四个值可以设置,这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的。
当只有一个值时,代表四个方向边距相同,均为设定的值,若有两个值,则前一个表示上下边距,
后一个表示左右边距;若有三个值,则第一个值表示上边距,第二个值表示右边距,第三个值表示下边距,
左边距会与右边距的值相同。
扫描二维码关注公众号,回复:
2951560 查看本文章
- 背景可以铺到
padding
区域,而不能铺到margin
区域
控制背景裁剪的background-clip
不支持margin-box
,换言之,无论如何,背景都无法铺到margin
区域中 - 对于块级元素,若其
width
不为auto
/default
,可以设置margin: auto
,可用于水平或垂直(需额外设置)方向上的自动居中,padding
则无此功能 margin
有折叠行为,padding
则无
在子元素之上写margin表达子元素和父元素之间的留白时,需要在父元素上加入BFC,否则margin会与父元素折叠。padding
则无此后顾之忧margin
可以设置为负值,padding
则无法设置为负值margin
负值可以让元素交叠,或撑宽元素的内容区域,这在有一定间隙的列表布局中极其有用