问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

区分Margin与Padding的使用方法

头像
quaker
    5767

    在编写CSS时，有没有明确规则或是参考指南介绍margin和padding的使用方法和区别？

    Stack Overflow 翻译cssmarginpadding
    阅读 4.2k
    1 个回答
    得票最新
    头像
    已注销
      10642425
      ✓ 已被采纳

      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。 

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>

      原文：When to use margin vs padding in CSS

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题