区分Margin与Padding的使用方法
在编写CSS时，有没有明确规则或是参考指南介绍margin和padding的使用方法和区别？
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
-
John Boker：Margin是在针对“容器”（block elements）的外围，padding则是内部。Margin属性是针对容器与容器之间的距离，而padding是容器与自身内部之间的距离。
Scott：给你看一张图，可以直观的了解两者的区别和功能。
有一点需要注意，IE浏览器相对特殊只渲染Content区域部分指定的宽度，所以要针对整个布局计算。
pavon：对我而言，两者最大的区别是Margin可以叠加值（collapse），padding则不可。两个容器相邻，设定Padding值为1em，浏览器会默认padding值为容器的一部分。例如，从第一个容器里内容的尾部添加padding属性，然后添加第二个容器的padding属性，再紧跟第二个容器的内容。两者之间就会原本应该是1em的间隔将累加为2em。
但如果用margin设定的话就不会出现此类现象，margin是针对容器外围的间距，而且可以与相邻的属性叠加。所以，在上述例子中，两个内容区域的间隔会保持为1em，而不是2em。这才符合刚开始设计的思想，而且margin是针对所有元素都有效。
此外，两者还有两个比较大的区别，padding属性包括点击区域和背景颜色/图片，margin不包括。平时我常用的还是margin，除非当我需要对一个边框或背景里添加一个空间。
slizice：这有一篇非常不错的文章里面详细的描述了两者的区别，图文并茂。Margin and Padding
twodayslate：也许这篇文章对你会有所帮助。当你使用padding时记住一点，padding是添加容器的宽或高。
Frank Schwieterman：下面是一个padding和margin的实例源代码，也可以点击查看demo点击预览。
全选复制放进笔记
<html> <style> .outer { padding:10px; background:red; } .inner { margin:10px; padding:10px; background:blue; border:solid white 1px; }; </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <body> <div class="outer"> <div class="inner" style="position:relative; height:0px; width:0px"> </div> </div> <script type="text/javascript"> $(".outer").click(function(e) { alert("outer"); e.stopPropagation(); }); $(".inner").click(function(e) { alert("inner"); e.stopPropagation(); }); </script> </body> </html>2019-07-17 19:14:18赞同 展开评论