代码一：全为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. 湖南省第十二届大学生计算机程序设计竞赛 B 有向无环图 拓扑DP

    1804: 有向无环图 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 187  Solved: 80[Submit][Status][Web Board ...

  2. C语言基本点初探

    1,对于int a=10++;此语句错误,为什么呢,对于i++来说,i是一个变量,是把i加1然后赋值给i,然而10不是一个变量所以无法执行加加的语法; 2,运算符的优先级: 赋值运算符<逻辑运算 ...

  3. 基于XMPP协议的Android即时通信系

    以前做过一个基于XMPP协议的聊天社交软件,总结了一下.发出来. 设计基于开源的XMPP即时通信协议,采用C/S体系结构,通过GPRS无线网络用TCP协议连接到服务器,以架设开源的Openfn'e服务 ...

  4. Android Studio使用第三方类库

    导入*.jar包 新建好了Android项目,添加一个第三方已经打包好的jar文件进你项目,下面就已添加一个odata4j的一个包 在项目中添加一个libs文件 直接通过COPY/PAST 把你下载的 ...

  5. 你必须知道的.NET之特性和属性（转）

    1. 引言 attribute是.NET框架引入的有一技术亮点,因此我们有必要花点时间走进一个发现attribute登堂入室的入口.因为.NET Framework中使用了大量的定制特性来完成代码约定 ...

  6. express－12 Cookie与会话

    简介 HTTP是无状态协议.当浏览器中加载页面,然后转到同一网站的另一页面时,服务器和浏览器都没有任何内在的方法可以认识到,这是同一浏览器访问同一网站.换一种说法,Web工作的方式就是在每个HTTP请 ...

  7. [工作bug]c:import参数传递问题解析

    一.起因: 在项目的工厂中,由于某个界面根据产品种类显示的产品属性均不相同,所以决定将界面进行拆分,将每一个产品写入一个jsp界面,分别命名为product0.jsp.product1.jsp,在主界 ...

  8. SOLID面向对象的五个设计原则，留空待学习。

     SOLID面向对象的五个设计原则对于开发人员非常重要,其身影在任何大中型软件项目中随处可见,建议必须掌握并灵活应用.此五原则分别为:     单一职责原则(Single Resposibility ...

  9. Dijkstra(变形) POJ 1797 Heavy Transportation

    题目传送门 题意:求1到n的最大载重量 分析:那么就是最大路上的最小的边权值,改变优先规则. #include <cstdio> #include <algorithm> #i ...

  10. Storm DRPC实现机制分析

    DRPC是建立在Storm基本概念(Topology.Spout.Bolt.Stream等)之上的高层抽象,个人理解它的目标是在Storm 集群之上提供一种分布式的RPC框架,以便能够利用Storm快 ...