代码一：全为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. 在Asp.Net MVC中实现RequiredIf标签对Model中的属性进行验证

    在Asp.Net MVC中可以用继承ValidationAttribute的方式,自定制实现RequiredIf标签对Model中的属性进行验证 具体场景为:某一属性是否允许为null的验证,要根据另 ...

  2. 【java IO】使用Java输入输出流 读取txt文件内数据，进行拼接后写入到另一个文件中

    package com.sxd.test.util; import java.io.BufferedReader; import java.io.BufferedWriter; import java ...

  3. ThinkPHP去重 distinct和group by

    转自:http://blog.csdn.net/helencoder/article/details/50328629 近期项目中,遇到数据表去重要求,对于ThinkPHP的去重有了更加准确的认识和体 ...

  4. hdu 2669 Romantic

    Romantic Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Sta ...

  5. RxJava 的使用入门

    一.什么是 RxJava? RxJava 是一个响应式编程框架,采用观察者设计模式.所以自然少不了 Observable 和 Subscriber 这两个东东了. RxJava 是一个开源项目,地址: ...

  6. 分享Kali Linux 2016.2第46周镜像文件

    分享Kali Linux 2016.2第46周镜像文件Kali Linux官网在11月13日发布Kali Linux 2016.2的第46周镜像文件.这次还是保持以往的规模,总共提供了11个镜像文件. ...

  7. Android定位方式和测试方法

    Android常用的三种定位方式有:基于GPS定位.基于基站地位.基于wifi定位. 1.基于GPS定位: GPS定位需要GPS模块(硬件)的支持,没有GPS模块是无法进行GPS定位的. GPS定位最 ...

  8. document.images、document.forms、doucument.links——>HTMLCollection

    由于历史原因,HTMLDocument类定义了一些快捷属性来访问各种各样的节点.例如,images.forms.links等属性指向香味类似只读数组的<img>.<form>. ...

  9. gridview自定义排序

    效果如图: 首先允许排序:AllowSorting="True":开启gridview的排序事件onsorting="GridView1_Sorting",也可 ...

  10. java获取日期

    /* * 获取昨天日期 方法一,这个方法好像有点慢 */Date dt = new Date(); Calendar cal = Calendar.getInstance();cal.add(Cale ...