我们都知道 padding 和 margin 都可以用来定位,但是有时用 padding 比 margin 更好,比如margin 的上下边距合并。具体在那些情况下,用 padding 比用 margin 更好啊?
从实用价值考量:
•背景可以铺到padding区域,而不能铺到margin区域
控制背景裁剪的background-clip不支持margin-box,换言之,无论如何,背景都无法铺到margin区域中
•对于块级元素,若其width不为auto/default,可以设置margin: auto,可用于水平或垂直(需额外设置)方向上的自动居中,padding则无此功能
•margin有折叠行为,padding则无
在子元素之上写margin表达子元素和父元素之间的留白时,需要在父元素上加入BFC,否则margin会与父元素折叠。padding则无此后顾之忧
•margin可以设置为负值,padding则无法设置为负值
margin负值可以让元素交叠,或撑宽元素的内容区域,这在有一定间隙的列表布局中极其有用
从实用价值考量:
•背景可以铺到padding区域,而不能铺到margin区域
控制背景裁剪的background-clip不支持margin-box,换言之,无论如何,背景都无法铺到margin区域中
•对于块级元素,若其width不为auto/default,可以设置margin: auto,可用于水平或垂直(需额外设置)方向上的自动居中,padding则无此功能
•margin有折叠行为,padding则无
在子元素之上写margin表达子元素和父元素之间的留白时,需要在父元素上加入BFC,否则margin会与父元素折叠。padding则无此后顾之忧
•margin可以设置为负值,padding则无法设置为负值
margin负值可以让元素交叠,或撑宽元素的内容区域,这在有一定间隙的列表布局中极其有用
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。