代码一：全为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. 以管理身份运行cmd

    搜索出cmd程序,然后右键-以管理员身份运行

  2. em与rem

    em是相对于父元素的font-size,rem是相对于根元素的font-size. rem的补充: ① 对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明.这些浏览器会忽略用rem设定 ...

  3. DotNet 资源大全中文版，内容包括：编译器、压缩、应用框架、应用模板、加密、数据库、反编译、IDE、日志、风格指南等

    DotNet 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-dotnet 是由 quozd 发起和维护.内容包括:编译器. ...

  4. JavaWeb监听器详解

    1 JavaWeb监听器概述 在JavaWeb被监听的事件源为:ServletContext.HttpSession.ServletRequest,即三大域对象.有监听域对象"创建" ...

  5. ez_setup.py（安装python下setuptools用）

    #!python"""Bootstrap setuptools installation If you want to use setuptools in your pa ...

  6. 点击不同按钮生成不同窗体到某个panel上面，类似Frame用法--不错

    //点击不同按钮生成不同页面加载到某个panel上面.procedure TMainForm.DemoButtonClick(Sender: TObject); var NewDemoClass: T ...

  7. [bzoj4514]数字配对[费用流]

    今年SDOI的题,看到他们在做,看到过了一百多个人,然后就被虐惨啦... 果然考试的时候还是打不了高端算法,调了...几天 默默地yy了一个费用流构图: 源连所有点,配对的点连啊,所有点连汇... 后 ...

  8. 解决：未能加载文件或程序集“EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089”

    使用nuget管理程序包,有可能在不同时间安装不同版本的Entity Framework:在项目创建初期安装的是6.0.0.0版本,后来添加的类库,安装了6.1.1版本,所以出现这个问题. 解决办法: ...

  9. 疯狂java学习笔记之面向对象(七) - super关键字

    super有以下两大作用: 1.起限定作用:强制去访问父类的成员(Field.方法) 2.起调用作用:指定/显示调用父类的某个构造器 super调用规则: 1.子类构造器总会调用父类构造器一次,默认情 ...

  10. POJ 1014 Dividing（多重背包）

    Dividing   Description Marsha and Bill own a collection of marbles. They want to split the collectio ...