【margin与padding的区别与用法】

margin与padding的区别:

1.margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。

2.padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。

想象你站在只有一个房间的屋子,你与房间墙壁之间的距离叫Padding ,房子与你隔壁邻居的房子间的距离可以理解为margin。

margin与padding的用法:

margin:(写法) margin-left:10px; 左外边距

                      margin-right:10px; 右外边距

                      margin-top:10px; 上外边距

                      margin-bottom:10px; 下外边距

                      margin:10px; 四边统一外边距

                      margin:10px 20px; 上下、左右外边距

                      margin:10px 20px 30px; 上、左右、下外边距

                      margin:10px 20px 30px 40px; 上、右、下、左外边距

padding:(写法)padding-left:10px; 左内边距

                          padding-right:10px; 右内边距

                          padding-top:10px; 上内边距

                          padding-bottom:10px; 下内边距

                          padding:10px; 四边统一内边距

                          padding:10px 20px; 上下、左右内边距

                          padding:10px 20px 30px; 上、左右、下内边距

                          padding:10px 20px 30px 40px; 上、右、下、左内边距

使用会出现的bug:

1.浏览器在默认状态下会对margin设置初值,所以在没有对div设置margin的情况下,div会出现一定的间隔;

2.相邻的 margin 存在重叠问题,如果能用 padding 实现,那重叠通常会是未预期的副作用;

3.padding中不能出现负值。

4.给子级写margin-top:20px;时就会出现子级与父级同时出现了top50的结果,解决方法就是给它的父级写一个overflow:hidden;就好了。

5.给子级写padding-top:20px;是就会出现子级的高度多了20px,而不是下移了20px,解决方式就是给它的父级写一个盒子 box-sizing:border-box;

原文地址:https://www.cnblogs.com/FFPING/p/8186367.html