代码一：全为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. POJ 1947 Rebuilding Roads 树形DP

    Rebuilding Roads   Description The cows have reconstructed Farmer John's farm, with its N barns (1 & ...

  2. 数字信号处理实验（零）—— 一维声音信号处理和二维图像处理

    一.在matlab下声音信号的I/O 1.读wav文件函数 •y = wavread('filename') •[y,Fs,bits] = wavread('filename') •[...] = w ...

  3. python logging模块 basicConfig配置文件

    logging.basicConfig(level=log_level, format='%(asctime)s %(filename)s[line:%(lineno)d] %(levelname)s ...

  4. JQuery学习之语法

    1.JQuery语法就是通过选取HTML元素,并对选取的元素执行某些操作: 基础语法:$(selector).action() (1)美元符号定义jQuery (2)选择符(selector)查询和查 ...

  5. Regionals 2012 :: Chengdu

    题目连接 排行榜 A和I都是签到题 按位BFS K Yet Another Multiple Problem 题意:给一些可以用的数字,求最小的数,它由特定的数字组成且是n的倍数 分析:暴力枚举不可行 ...

  6. Android自动化测试 - MonkeyRunner(一)介绍

    MonkeyRunner介绍: MonkeyRunner是Google提供的一个基于坐标点的Android黑盒自动化测试工具. Monkeyrunner工具提供了一套API让用户/测试人员来调用,调用 ...

  7. 我认为我可以去尝试做一下Maya Ue4导出插件

    Begin Map Begin Level Begin Actor class="StaticMeshActor" Name=Floor Archetype=StaticMeshA ...

  8. java实现文件上传--flash上传

    1.http请求的头信息是“application/octet-stream”,request body 是二进制的flash图片流 2.把流中的信息读入到文件中 代码如下,代码分三个部分: ---- ...

  9. git 回滚

    git reset --hard HEAD~10 可以通过上面的命令会退到最初的版本查看源代码, git reset --hard 4aa9a32d1625997ef5b28463ccde78d711 ...

  10. 同引擎mysql数据库转导快

    mysql数据库从一个表导入到另外一个表,数据库表引擎类型相同速度会快很多,相反,慢得离奇,5w,相同从myisam到myisam一或两分钟,从myisam到innodb要1到2个小时. [注意:最近 ...