区分Margin与Padding的使用方法-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

区分Margin与Padding的使用方法

a123456678 2016-03-25 14:26:40 1739

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

使用padding 使用的方法 add使用 par使用方法 margin使用
分享到
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:14:18

    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>
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

相似问题
最新问题
推荐课程