代码一：全为padding。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>margin||padding</title>
    <style type="text/css">
#div1{
    width: 800px;
    background-color: red;
    padding: 20px;/*840px*/
}
#div2{
    background-color: green;
    padding: 20px;/*800px*/
}
#div3{
    background-color: blue;
    padding: 20px;/*760px*/
}
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。
            </div>
        </div>
    </div>
</body>
</html>

div1,div2,div3的宽度分别为840px,800px,760px。

代码二：全为margin。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>margin||padding</title>
    <style type="text/css">
#div1{
    width: 800px;
    background-color: red;/*800px*/
}
#div2{
    background-color: green;
    margin: 20px;/*760px*/
}
#div3{
    background-color: blue;
    margin: 20px;/*720px*/
}
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。
            </div>
        </div>
    </div>
</body>
</html>

div1,div2,div3的宽度分别为800px,760px,720px。

代码三：包含padding和margin。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>margin||padding</title>
    <style type="text/css">
#div1{
    width: 800px;
    background-color: red;
    padding: 20px;/*840px*/
}
#div2{
    background-color: green;
    padding: 20px;
    margin: 20px;/*760px*/
}
#div3{
    background-color: blue;
    padding: 20px;
    margin: 20px;/*680px*/
}
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。
            </div>
        </div>
    </div>
</body>
</html>

div1,div2,div3的宽度分别为840px,760px,680px。

关于padding与margin的区别的更多相关文章

  1. Css中的盒子结构padding和margin的区别

    之前写过一个padding和marfgin的区别的博客见地址:http://blog.csdn.net/qq_32059827/article/details/50998965.那里只是笼统介绍了一下 ...

  2. Android中的padding和margin的区别

    在Android的布局中,常常有人将padding和margin搞混,他们其实不一样的,padding是该控件的内部距离. magin是该控件与其他控件之间的距离.例如 <LinearLayou ...

  3. padding和margin的区别

    简单来说,padding就是内边距,margin就是外边距如下图: margin和padding的区别用图表示为:

  4. android的padding和margin的区别

    android:padding和android:layout_margin的区别:padding是站在父view的角度描述问题,它规定它里面的内容必须与这个父view边界的距离. margin则是站在 ...

  5. HTML中padding和margin的区别和用法

     margin(外边距) 定义:margin是用来隔开元素与元素的间距,发生在元素本身的外部,margin用于布局分开元素使元素与元素互不相干. 提示:margin: top right bottom ...

  6. padding与margin的区别

    padding    是控件的内容相对控件的边缘的边距． margin      是控件边缘相对父空间的边距． android:gravity 属性是对该view 内容的限定．比如一个button 上 ...

  7. input元素的padding border margin的区别

    padding内(不包含padding)的部分才是可输入部分,也是width和height标明的区域.padding的部分加上width和height部分是background的部分.padding的 ...

  8. Android padding和margin的区别

    如: Padding 为内边框,指该控件内部内容,如文本/图片距离该控件的边距 Margin 为外边框,指该控件距离边父控件的边距 如: 当按钮分别设置以上两个属性时,得到的效果是不一样的. andr ...

  9. android:padding和android:margin的区别 详解

    转载请说明博客地址:http://blog.csdn.net/qq_32059827/article/details/51487997 看了网上的类似博客,并没有给出确定的区别.现在具体分析一下pad ...

随机推荐

  1. JQuery 操作对象的属性值

    通过JQuery去操作前台对象(div,span...)的属性是很常见的事情,本文就简单的介绍几种操作情形. 1):通过属性值去获取对象 2):用JQuery去修改对象的属性值 3):获取并修改对象的 ...

  2. hihocoder #1333 : 平衡树·Splay2

    描述 小Ho:好麻烦啊~~~~~ 小Hi:小Ho你在干嘛呢? 小Ho:我在干活啊!前几天老师让我帮忙管理一下团队的人员,但是感觉好难啊. 小Hi:说来听听? 小Ho:事情是这样的.我们有一个运动同好会 ...

  3. UIPopoverController 的使用

    #import "ViewController.h" #import "RYColorSelectController.h" #import "RYM ...

  4. LoadRunner替换字符串（可以同时替换多个）

    在global.h中添加代码 /* * @param char* dest 目标串,也就是替换后的新串 * @param const char* src 源字符串,被替换的字符串 * @param c ...

  5. STL中容器的push()或者push_back()函数的一点说明

    在STL的queue 或者 vector.list等容器适配器或者容器中,会经常用到的函数就是push()或者push_back()函数,但是有一点需要明确的是: 在使用这些函数对容器/适配器对象增加 ...

  6. 关闭Android/iPhone浏览器自动识别数字为电话号码

    <meta name="format-detection" content="telephone=no"><meta http-equiv=& ...

  7. css 让内容满屏居中不变形

    .selector { position: fixed; width: 100%; height: 100%; background-image: url(path); background-repe ...

  8. PDA手持移动POS销售开单软件（网络版）、PDA手持设备小票机

    背景描述: 一家大中型批发及门店销售企业,经销多种冻食品,业务范围覆盖周边众多区域和城市.成立以来,随着业务量的扩大,产品销售分两大渠道:多门店销售和仓库批发,各门店每天都有大量的零散客户和老客户进行 ...

  9. js兼容方法：获取当前样式|计算后样式 getStyle

    function getStyle(obj,attr){ if(obj.currentStyle){ //for IE return obj.currentStyle[attr]; }else{ re ...

  10. Bestcoder round #65 && hdu 5592 ZYB's Premutation 线段树

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total Submissio ...