关于margin和padding的使用场景有什么区别，或者说如何判断哪些场景使用padding或是margin
来源：3-2 机酒自由行部分开发（1）
白妖
2021-02-01 15:37:33
问题描述：
在h2的编辑中，有好几次我是使用的margin-top去分隔上下盒子边距，但是同时我也看到视频中老师使用的都是padding-top。我很疑惑，这两个属性要如何准确判断它们的使用场景呢？
写回答
1回答
-
同学你好，margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔，所以它俩常见的应用场景区别如下：
1、使用margin的场景：（1）需要在border外侧添加空白。（2）空白处不需要背景。
2、使用padding的场景：（1）需要在border内侧添加空白。（2）空白处需要背景。
可以如下示例理解：
不设置margin和padding时
两个元素会紧挨着显示
如果设置margin属性
效果如下，在border外添加空白间距，空白处没有背景颜色
如果设置padding属性
效果如下：在border内侧添加空白。空白处有红色背景。
一般不用区分到底使用margin还是padding，能够实现效果，哪一种方式都是可以的。
祝学习愉快~
0
相似问题