两张CSS盒模型图示 搞清楚border、margin和padding
关于CSS盒模型的教程可能经常看到，不过还有一些新手朋友没有搞清楚，通过下面的两张图片，大家可以很清楚的看到border、margin、padding的关系。
边框属性(border)用来设定一个元素的边线；
外边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离；
内边距属性(padding)是用来设置元素内容到元素边界的距离。
看过本文的人还看过
最新图文推荐
最新专栏文章
大家感兴趣的内容
网友热评的文章HTML CSS——margin和padding的学习
来源：博客园






一、什么是边距
CSS中的边距指的是当前元素border与周围其它元素border的距离（或者称为空间）。
二、什么是内边距，什么是外边距
代码2-1：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

height:150
margin-top:40
padding-top:40
height:150
.test2_son{




图01
说明：图01中灰色地带是class值为test2的div的边框，它是有宽度的；
①、外边距：外边距指的是margin作用元素（这里是class值为test2的div）边框外延距离另一个元素边框外延（如果另一个元素和margin作用元素同级（这里是class值为test1的div））或内延（如果另一个元素是margin作用元素父级）的距离，如上图；
②、内边距：内边距指的是margin作用元素（这里是class值为test2的div）边框内延距离其子元素边框外延的距离，如上图；
③、内边距和外边距是针对于其作用的元素和其他元素来讲的，某一元素的内边距在另一个元素看来有可能是外边距，比如：class值为test2 div的内边距在class值为test2_test div元素看来就是外边距，所以上面代码也可以这样写：将class值为test2的div样式列表中“padding-top:40”去掉，class值为test2_test div元素添加“margin-top:40”——这样的效果和代码2-1是一样的；
三、margin和padding的属性值
①、它们的默认值都是0；它们的属性值都可以为auto——margin作用的元素由浏览器计算外边距，padding作用的元素由浏览器计算内边距；都 可通过设定属性值为inherit而继承父元素边距——margin继承父元素外边距，padding继承父元素内边距，但由于inherit在任何的版 本的 Internet Explorer （包括 IE8）都不支持，所以也就没有学习的必要了。
②、margin允许指定负的外边距值，不过使用时要小心；padding不允许指定负边距值；
③、margin和padding的属性值都可以有1个、2个、3个和4个：
a、margin有4个属性值(例如margin:10px 5px 15px 20)， 其含义是：上外边距10px、右外边距5px、下外边距15px、左外边距20px；
padding有4个属性值(例如padding:10px 5px 15px 20)，其含义是：上内边距10px、右内边距5px、下内边距15px、左内边距20px；
总结：无论是margin还是padding，如果有4个属性值，那么它们的作用方向顺时针
依次为上、右、下、左；
b、margin有3个属性值(例如margin:10px 5px 15)， 其含义是：上外边距10px、右外边距和左外边距5px、下外边距15px；
padding有3个属性值(例如padding:10px 5px 15)，其含义是：上内边距10px、右内边距和左内边距5px、下内边距15px；
总结：无论是margin还是padding，如果有3个属性值，那么它们的作用方向顺时针
依次为上、右左、下；
c、margin有2个属性值(例如margin:10px 5)， 其含义是：上外边距和下外边距10px、右外边距和左外边距5px；
padding有2个属性值(例如padding:10px 5)，其含义是：上内边距和下内边距10px、右内边距和左内边距5px；
总结：无论是margin还是padding，如果有2个属性值，那么它们的作用方向顺时针
依次为上下、右左；
d、margin有1个属性值(例如margin:10)， 其含义是：4 个外边距都是 10px；
padding有1个属性值(例如padding:10)，其含义是：4 个内边距都是 10px；
总结：无论是margin还是padding，如果有1个属性值，那么它们的边距值都是相等的

一、什么是边距
CSS中的边距指的是当前元素border与周围其它元素border的距离（或者称为空间）。
二、什么是内边距，什么是外边距
代码2-1：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

height:150
margin-top:40
padding-top:40
height:150
.test2_son{




图01
说明：图01中灰色地带是class值为test2的div的边框，它是有宽度的；
①、外边距：外边距指的是margin作用元素（这里是class值为test2的div）边框外延距离另一个元素边框外延（如果另一个元素和margin作用元素同级（这里是class值为test1的div））或内延（如果另一个元素是margin作用元素父级）的距离，如上图；
②、内边距：内边距指的是margin作用元素（这里是class值为test2的div）边框内延距离其子元素边框外延的距离，如上图；
③、内边距和外边距是针对于其作用的元素和其他元素来讲的，某一元素的内边距在另一个元素看来有可能是外边距，比如：class值为test2 div的内边距在class值为test2_test div元素看来就是外边距，所以上面代码也可以这样写：将class值为test2的div样式列表中“padding-top:40”去掉，class值为test2_test div元素添加“margin-top:40”——这样的效果和代码2-1是一样的；
三、margin和padding的属性值
①、它们的默认值都是0；它们的属性值都可以为auto——margin作用的元素由浏览器计算外边距，padding作用的元素由浏览器计算内边距；都 可通过设定属性值为inherit而继承父元素边距——margin继承父元素外边距，padding继承父元素内边距，但由于inherit在任何的版 本的 Internet Explorer （包括 IE8）都不支持，所以也就没有学习的必要了。
②、margin允许指定负的外边距值，不过使用时要小心；padding不允许指定负边距值；
③、margin和padding的属性值都可以有1个、2个、3个和4个：
a、margin有4个属性值(例如margin:10px 5px 15px 20)， 其含义是：上外边距10px、右外边距5px、下外边距15px、左外边距20px；
padding有4个属性值(例如padding:10px 5px 15px 20)，其含义是：上内边距10px、右内边距5px、下内边距15px、左内边距20px；
总结：无论是margin还是padding，如果有4个属性值，那么它们的作用方向顺时针
依次为上、右、下、左；
b、margin有3个属性值(例如margin:10px 5px 15)， 其含义是：上外边距10px、右外边距和左外边距5px、下外边距15px；
padding有3个属性值(例如padding:10px 5px 15)，其含义是：上内边距10px、右内边距和左内边距5px、下内边距15px；
总结：无论是margin还是padding，如果有3个属性值，那么它们的作用方向顺时针
依次为上、右左、下；
c、margin有2个属性值(例如margin:10px 5)， 其含义是：上外边距和下外边距10px、右外边距和左外边距5px；
padding有2个属性值(例如padding:10px 5)，其含义是：上内边距和下内边距10px、右内边距和左内边距5px；
总结：无论是margin还是padding，如果有2个属性值，那么它们的作用方向顺时针
依次为上下、右左；
d、margin有1个属性值(例如margin:10)， 其含义是：4 个外边距都是 10px；
padding有1个属性值(例如padding:10)，其含义是：4 个内边距都是 10px；
总结：无论是margin还是padding，如果有1个属性值，那么它们的边距值都是相等的
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动转载自 &/zhuzhenwei918/p/6124263.html
深入理解css中的margin属性
　　之前我一直认为margin属性是一个非常简单的属性，但是最近做项目时遇到了一些问题，才发现margin属性还是有一些“坑”的，下面我会介绍margin的基本知识以及那些“坑”。这篇博文主要分为以下几个部分：
第一部分：margin--基础知识
　　要介绍margin的基础知识，我们不可回避地要谈到css盒子模型（Box Model），一般而言，css盒子模型是用来设计和布局的。它本质上是一个盒子，包括：外边距（margin）、边框（border）、内边距（padding）以及最中间的内容（content）。下图即为盒子模型（这里只谈W3C规范的标准盒模型，而不谈IE5和IE6在怪异模式中使用的非标准的盒子模型）：
　　 我们要介绍的margin在最外层，因为margin（外边距）一定是透明的，所以它可以用来使得不同的盒子之间留有一定的间隙从而达到布局美观等效果。从上面的盒子模型中我们可以看到，margin在四周均存在，我们可以使用margin-top、margin-right、margin-bottom、margin-left分别设置这四个方向的margin值。（注：由于这部分知识较为基础，所以我不再在这部分不做更多介绍）
第二部分：margin--在同级元素（非父子关系）之间应用
　　这一部分主要介绍水平方向和竖直方向的外边距的合并问题。
　（1）水平方向的外边距合并
　　　　&两个水平方向的盒子相遇，那么最终两者之间的距离为左边盒子的右外边距和右边盒子的做外边距之和。
　　　　 例1：
　　 & & 代码如下：
&!DOCTYPE&html&
&html&lang="en"&
&&&&&meta&charset="UTF-8"&
&&&&&title&水平方向的两个盒子&/title&
&&&&&style&
&&&&&&&&*{
&&&&&&&&&&&&margin:0;
&&&&&&&&&&&&padding:0;
&&&&&&&&&&&&border:0;
&&&&&&&&body{
&&&&&&&&&&&&font-size: 0;
&&&&&&&&.left{
&&&&&&&&&&&&width: 100
&&&&&&&&&&&&height: 100
&&&&&&&&&&&&background:
&&&&&&&&&&&&display: inline-
&&&&&&&&&&&&margin-right: 50
&&&&&&&&&&&&font-size: 20
&&&&&&&&.right{
&&&&&&&&&&&&width: 100
&&&&&&&&&&&&height: 100
&&&&&&&&&&&&background:
&&&&&&&&&&&&display: inline-
&&&&&&&&&&&&margin-left: 50
&&&&&&&&&&&&font-size: 20
&&&&&/style&
&&&&&div&class="left"&宽为100px,右边距为50px&/div&
&&&&&div&class="right"&宽为100px,左边距为50px&/div&
　　效果如下：
这时两者之间的距离刚好为100px。
　　补充说明：大家可以看到，为了使得两个div（块状元素）脱离正常的文档流我使用了display:inline-属性，另外，我还把body的font-size设置为0，这样可以解决inline-block自身的问题（如果不清楚这里的描述可以看我的博文《》，这篇文章介绍了inline-block存在的问题），否则两个div的举例会大于100px。当然使用float也可以使得两个div出现在同一行中。
　　（2）竖直方向的外边距合并
　　两个竖直方向的盒子相遇时，其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。
&!DOCTYPE&html&
&html&lang="en"&
&&&&&meta&charset="UTF-8"&
&&&&&title&水平方向的两个盒子&/title&
&&&&&style&
&&&&&&&&*{
&&&&&&&&&&&&margin:0;
&&&&&&&&&&&&padding:0;
&&&&&&&&&&&&border:0;
&&&&&&&&.top{
&&&&&&&&&&&&width: 100
&&&&&&&&&&&&height: 100
&&&&&&&&&&&&margin-bottom: 100
&&&&&&&&&&&&background:
&&&&&&&&.bottom{
&&&&&&&&&&&&width: 100
&&&&&&&&&&&&height: 100
&&&&&&&&&&&&margin-top: 50
&&&&&&&&&&&&background:
&&&&&/style&
&&&&&div&class="top"&高为100px,下边距为100px&/div&
&&&&&div&class="bottom"&高为100px,上边距为50px&/div&
　　效果如下：
这时我们肉眼都可以观察出来，两者竖直方向的举例大约为100px（实际就是100px）而非100+50=150px；这正是因为两个竖直方向的盒子相遇时，其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。
　　另外一个有趣的例子就是：假设有一个元素同时设置了margin-top和margin-bottom，但是内容为空，那么这两个margin值也会叠加，值为两者最大的一个，它类似与竖直方向上两个盒子margin值的叠加。代码如下：
&!DOCTYPE&html&
&html&lang="en"&
&&&&&meta&charset="UTF-8"&
&&&&&title&水平方向的两个盒子&/title&
&&&&&style&
&&&&&&&&*{
&&&&&&&&&&&&margin:0;
&&&&&&&&&&&&padding:0;
&&&&&&&&.top{
&&&&&&&&&&&&width: 500
&&&&&&&&&&&&height: 100
&&&&&&&&&&&&background:
&&&&&&&&.middle{
&&&&&&&&&&&&margin-top: 100
&&&&&&&&&&&&margin-bottom:50
&&&&&&&&.footer{
&&&&&&&&&&&&width: 500
&&&&&&&&&&&&height: 100
&&&&&&&&&&&&background:
&&&&&/style&
&&&&&div&class="top"&上面的div,高100px&/div&
&&&&&div&class="middle"&&/div&
&&&&&div&class="footer"&下面的div，高100px&/div&
　　最终的效果如下：
　　我们发现这时在上面的div和在下面的div之间的举例并不是100+50=150px，而是两者中的最大者，即100px。
　　那么W3C为什么会设定这样的标准而不设定和水平方向一样的标准呢？即margin值的叠加，实际上这也是有一定的道理的。比如我们需要设计一个由若干个段落构成的一个页面。我们需要设置margin-top和margin-bottom使得第一段和页面的最上方有一段距离，使得最后一段和最下方有一段距离。下面是不叠加和叠加的效果图：
我们可以看到左边的页面没有重叠，那么两个段落之间的举例就是最上方的两倍间距了，而右边的页面发生了重叠，则所有的间距都是相等的。或许这就是这样设定标准的目的吧，谁知道呢？
第三部分：margin--在父元素和子元素之间应用（重点）
　 &&第二部分介绍了同级元素之间使用margin，而这一部分将要介绍最有意思的父元素和子元素之间margin的应用。这一部分，我们同样从两个方面来讨论。一方面是子元素设置水平方向上的margin值，另一方面是子元素设置竖直方向的margin值。
　　（1）在子元素中设置水平方向的margin值
　　　 我们可以设置margin-left来控制子元素的左边框和父元素的左边框之间的举例。
　　　 例3：
&!DOCTYPE&html&
&html&lang="en"&
&&&&&meta&charset="UTF-8"&
&&&&&title&margin&/title&
&&&&&style&
&&&&&&&&*{padding:0; margin:0; border:0;}
&&&&&&&&.father{
&&&&&&&&&&&&width: 500
&&&&&&&&&&&&height: 500
&&&&&&&&&&&&background:
&&&&&&&&.son{
&&&&&&&&&&&&width: 100
&&&&&&&&&&&&height: 100
&&&&&&&&&&&&background:
&&&&&&&&&&&&margin-left: 100
&&&&&/style&
&&&&&div&class="father"&
&&&&&&&&&div&class="son"&宽度为100px，margin-left为100px。&/div&
&&&&&/div&
　　我将子元素的margin-left设置为了100效果如下：
即子元素的左边框和父元素的左边框之间的距离为100px。与在同级元素之间设置margin不同，因为同级元素之间的margin不会考虑到padding,但是在父元素和子元素就不同了，那么如果父元素中如果有padding，效果会是什么样的呢？请看下面一个例子：
　　下面我们在上面例子的基础上给父元素添加padding值。
&!DOCTYPE&html&
&html&lang="en"&
&&&&&meta&charset="UTF-8"&
&&&&&title&margin&/title&
&&&&&style&
&&&&&&&&*{padding:0; margin:0; border:0;}
&&&&&&&&.father{
&&&&&&&&&&&&width: 500
&&&&&&&&&&&&height: 500
&&&&&&&&&&&&padding:100
&&&&&&&&&&&&background:
&&&&&&&&.son{
&&&&&&&&&&&&width: 100
&&&&&&&&&&&&height: 100
&&&&&&&&&&&&background:
&&&&&&&&&&&&margin-left: 100
&&&&&/style&
&&&&&div&class="father"&
&&&&&&&&&div&class="son"&宽度为100px，margin-left为100px。&/div&
&&&&&/div&
　　上面的代码给父元素添加了100px的padding值，效果如下：
我们可以看到子元素举例上方的距离为100px，因为子元素一定是在父元素的content的部分的，这点毫无疑问。
但是经过测量可以发现子元素的左边框距离父元素的左边框之间的距离为200px，因为其中还有100px的左padding值，前面的例子因为我没有设置padding值，所以没有观察出来，因此这就说明了在子元素中设置margin-left，其值实际上是子元素的左边框距离父元素左padding内侧的距离。
　例5：margin-right的使用和margin-left的使用是相似的，我在这里只举一个例子。
　　这个例子在子元素中设置了margin-right值，如下所示：
&!DOCTYPE&html&
&html&lang="en"&
&&&&&meta&charset="UTF-8"&
&&&&&title&margin&/title&
&&&&&style&
&&&&&&&&*{padding:0; margin:0; border:0;}
&&&&&&&&.father{
&&&&&&&&&&&&width: 500
&&&&&&&&&&&&height: 500
&&&&&&&&&&&&padding:100
&&&&&&&&&&&&background:
&&&&&&&&.son{
&&&&&&&&&&&&float:
&&&&&&&&&&&&width: 100
&&&&&&&&&&&&height: 100
&&&&&&&&&&&&background:
&&&&&&&&&&&&margin-right: 100
&&&&&/style&
&&&&&div&class="father"&
&&&&&&&&&div&class="son"&宽度为100px，margin-right为100px。&/div&
&&&&&/div&
　　这个例子与例4的区别仅在与子元素的位置不同。效果如下：
通过这个例子可以说明margin-right的值是子元素的右边框和父元素的右padding内侧的距离。只是前面的几个例子我没有使用padding，所以无法观察出来。
　　（2）在子元素中设置竖直方向的margin值
　　　　按照前面的经验，理论上来说，我们同样可以通过设置margin-top的值使得子元素的上边框和父元素的上padding的内侧留有一定的距离。那么我们就试试吧！
&!DOCTYPE&html&
&html&lang="en"&
&&&&&meta&charset="UTF-8"&
&&&&&title&margin&/title&
&&&&&style&
&&&&&&&&*{padding:0; margin:0; border:0;}
&&&&&&&&.father{
&&&&&&&&&&&&width: 500
&&&&&&&&&&&&height: 500
&&&&&&&&&&&&background:
&&&&&&&&.son{
&&&&&&&&&&&&width: 100
&&&&&&&&&&&&height: 100
&&&&&&&&&&&&background:
&&&&&&&&&&&&margin-top: 100
&&&&&/style&
&&&&&div&class="father"&
&&&&&&&&&div&class="son"&高度为100px，margin-top为100px。&/div&
&&&&&/div&
　　这个例子我设置了margin-top为100px，效果如下：
这并不是我们想要的效果啊，我们希望子元素的上部距离父元素的上部为100px，可是我们看到的却是父元素的上部距离浏览器页面的上部有100px的距离，这是为什么呢？哪里出现问题了呢？
　　实际上这是因为当父元素没有设置padding值以及border值时，出现了一个bug--父元素的上方与子元素的上方完全重合在了一起，无法分开。所以才会导致上述这种父元素和子元素同时向下的情况。
　　对于这种问题解决方法有下面几种：
方法一：给父元素添加padding-top值
方法二：给父元素添加border值
方法三：给父元素添加属性overflow:
方法四：给父元素或者子元素声明浮动float
方法五：使父元素或子元素声明为绝对定位：position:
方法六：给父元素添加属性&overflow: positon:relative；（注：此方法为后续添加，感谢博友@小精灵Pawn提供此方法）
　　方法一：基于例6，在父元素的css代码中添加padding-top:1效果如下：
方法的唯一缺点就是增加了1px的误差。
　　方法二：基于例6，在父元素的css代码中添加border-top:1效果如下：
同样达到了效果， 缺点同方法一。
　　方法三：基于例6，在父元素的css代码中添加overflow:效果如下：
同样达到了效果，并且没有任何误差的存在。堪称perfect!!!!
　　方法四：给父元素或者子元素声明基于例6，在子元素css代码添加float:或者在父元素css代码添加float:均达到效果，这里不再展示相同的图片。
　　　　优点：没有像素的误差。 & 缺点：float有时是不必要的。
　　方法五：给父元素或者子元素添加position:属性。 同样达到效果。
　　　　优点：同方法四。 &且只要我们不使用top和left也不会有任何影响，所以这也是一种不错的方法。
（说明：博友&＠laden666666　指出，上述方法三、四、五实际上都是去除子元素margin穿透父容器的方法，可以归类为bfc法，本质相同。 在此表示感谢）&
& & &&方法六：给父元素添加overflow:和position:同样达到效果。
　　　 &　此方法亲测有效，是博友 @小精灵Pawn提供，在此表示感谢。
第四部分：margin值的单位为%时的几种情况
　　　　之前我举例子时使用margin，它的值都是以px为单位的，这个理解起来没有问题。但是如果margin值是以%为单位呢？实际上这时候百分比（%）是相对于该元素的父元素（容器），对于同级元素和父子元素都是如此。（再次感谢 博友@小精灵Pawn 提供的建议！！基于此建议补充这部分内容） 但是在同级元素中使用竖直方向的margin时会出现意想不到的结果，下面举例说明。
　　（1）同级元素在水平方向使用值为%的margin
&&&&&meta&charset="UTF-8"&
&&&&&title&margin&/title&
&&&&&style&
&&&&&&&&*{
&&&&&&&&&&&&margin:0;
&&&&&&&&&&&&padding:0;
&&&&&&&&.first{
&&&&&&&&&&&&float:
&&&&&&&&&&&&width: 200
&&&&&&&&&&&&height: 200
&&&&&&&&&&&&background:
&&&&&&&&.second{
&&&&&&&&&&&&float:
&&&&&&&&&&&&width: 200
&&&&&&&&&&&&height: 200
&&&&&&&&&&&&background:
&&&&&&&&&&&&margin-left: 20%;
&&&&&/style&
&&&&&div&class="first"&宽为200，无margin&/div&
&&&&&div&class="second"&宽为200,margin-left为20%;&/div&
这个例子中，设置两个元素向左浮动，以便于观察两者水平方向的margin。其中左边div无margin，右边div的margin-left为20%，效果如下：
从效果图可以看出两个div之间的间距始终为父元素（这里右边div的父元素即为body，其宽度为浏览器宽度）的20%。
　　（2）同级元素在竖直方向使用值为%的margin
　　　根据例7的启发，我们可以猜想，如果在竖直方向上使用margin，且值的单位为%,那么最终两者之间的距离将是父元素(上例中为body)的百分数。那么究竟是不是这样呢？看下面的例子。
&&&&&meta&charset="UTF-8"&
&&&&&title&margin&/title&
&&&&&style&
&&&&&&&&*{
&&&&&&&&&&&&margin:0;
&&&&&&&&&&&&padding:0;
&&&&&&&&.first{
&&&&&&&&&&&&width: 200
&&&&&&&&&&&&height: 200
&&&&&&&&&&&&background:
&&&&&&&&.second{
&&&&&&&&&&&&width: 200
&&&&&&&&&&&&height: 200
&&&&&&&&&&&&background:
&&&&&&&&&&&&margin-top: 10%;
&&&&&/style&
&&&&&div&class="first"&高为200，无margin&/div&
&&&&&div&class="second"&高为200,margin-top为20%;&/div&
这里设置上面的div无margin，下面的div的margin-top为10。效果如下：
我们发现，当我在缩小浏览器的高度时，竖直方向上的间距并没有缩小！！！ 而当我缩小浏览器的宽度时，竖直方向上的距离缩小了！！！
这就说明：统计元素之间在竖直方向上使用margin，当值的单位为%时，它是相对于父元素的宽度。
　　那么这里为什么不是如我们所希望的那样相对于浏览器的高度呢？知乎上有大神是这样解释的（原文地址：/question/?rf=）：
　　（3）父子元素使用值为%的margin
　　　　对于父子元素，如果在子元素中使用单位为%margin，那么这个margin值是相对于父元素的宽度和高度（注意：这时的确是相对于父元素的高度！）的。
　　 & & &例9 &
　　　　代码如下：
&!DOCTYPE&html&
&html&lang="en"&
&&&&&meta&charset="UTF-8"&
&&&&&title&Document&/title&
&&&&&style&
&&&&&&&&*{
&&&&&&&&&&&&margin:0;
&&&&&&&&&&&&padding:0;
&&&&&&&&.father{
&&&&&&&&&&&&width: 500
&&&&&&&&&&&&height: 300
&&&&&&&&&&&&background:
&&&&&&&&&&&&overflow:
&&&&&&&&.son{
&&&&&&&&&&&&width: 100
&&&&&&&&&&&&height: 100
&&&&&&&&&&&&background:
&&&&&&&&&&&&margin-top: 20%;
&&&&&&&&&&&&margin-left: 20%;
&&&&&/style&
&&&&&div&class="father"&
&&&&&&&&&div&class="son"&&/div&
&&&&&/div&
　　在这个例子中，我设置了margin-left的值为20%，margin-top的值为20%，父元素的width为500px,父元素的height为300px。下面看看效果吧。
从上图可以看出子元素的margin-top值最终同样是相对与父元素的宽度而非高度。
阅读(...) 评论()评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
css热门文章css中margin和padding用法区别介绍
我的图书馆
css中margin和padding用法区别介绍
用margin还是用padding这个问题是每个学习CSS进阶时的必经之路。
　　CSS边距属性定义元素周围的空间，通过使用单独的属性，可以对上、右、下、左的外边距进行设置，也可以使用简写的外边距属性同时改变所有的外边距。
　　边界(margin)：元素周围生成额外的空白区，“空白区”通常是指其他元素不能出现且父元素背景可见的区域。
　　padding称呼为内边距，其判断的依据即边框离内容正文的距离，而我喜欢CSS权威指南解释的“补白”（或者叫“留白”），因为他很形象。补白(padding)：补白位于元素框的边界与内容区之间。很自然，用于影响这个区域的属性是padding。
　　关于什么时候用margin什么时候用padding，网上有许许多多的讨论，大多数似乎讨论到点上面，却又有些隔靴搔痒的感觉，总是答不到点
上。而且margin和padding在许多地方往往效果都是一模一样，而且你也不能说这个一定得用margin那个一定要用padding，因为实际的
效果都一样，你说margin用起来好他说padding用起来会更好，但往往争论无果。根据网上的总结归纳大致发现这几条还是比较靠谱的：
　　何时应当使用margin：
　　1、需要在border外侧添加空白时。
　　2、空白处不需要背景（色）时。
　　3、上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。
　　何时应当时用padding：
　　1、需要在border内测添加空白时。
　　2、空白处需要背景（色）时。
　　3、上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。
　　个人认为：margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&用Margin还是用Padding&/title&
.top{width:160 height:50 background:#}
.middle{width:160 background:# border-top:1px solid #}
.middle .firstChild{margin-top:20}
.middle .secondChild{margin-top:15}
&div class="top"&&/div&
&div class="middle"&
& &div class="firstChild"&我是firstChild，我只是想和我的父元素隔开点距离，这样看起来舒服。&/div&
& &div class="secondChild"&我要和楼上隔开点的距离。恩，能与底边有点呼吸距离就更好了。&/div&
&/html&&&&&&&
　　上面这个效果看起来很不错，达到了我们需要实现的目标。然而，我们细细查看下这个代码，对照下我们上文所说的规则，firstChild用了
margin-top:20px来隔开父元素与他的距离，secondChild也用margin-top:15来隔开他与firstChild的距离，
咋看之下挺符合我们所说的margin是用来隔开元素与元素的间距。但是他符合我们所说的margin用于布局分开元素使元素与元素互不相干吗？
　　这里我想说的是NO，firstChild同middle属于一种父子元素关系，又是一种包裹元素与内容的关系，他们之间从拟人化的角度来讲，
不应该是老死不相干的局面。我们再来看我们为什么要让firstChild与他的父元素隔开的距离，从表现的角度上来看，文字与边靠的太近，肯定不好看。
让文字与元素边隔开的距离，既美观，又使得文字有了足够的“呼吸空间”，方便阅读，这恰恰符合padding用于元素与内容之间的间隔让内容（文字）与
（包裹）元素之间有个“呼吸距离”。
　　我们再来看，firstChild使用margin-top引发了垂直外边距合并的隐患，middle如果不加一个类似border-
top:1px solid #ccc的话标准浏览器下就会呈现子元素顶了父元素margin隐患可见这个时候margin显然不是很好的选择。
我们试着这样来修改：
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&用Margin还是用Padding&/title&
.top{width:160 height:50 background:#}
.middle_2{width:160 background:# padding:20px 0}
.middle_2 .firstChild{}
.middle_2 .secondChild{margin-top:15}
&div class="top"&&/div&
&div class="middle_2"&
& &div class="firstChild"&我是firstChild，我只是想和我的父元素隔开点距离，这样看起来舒服&/div&
& &div class="secondChild"&我是secondChild，我要和楼上隔开点的距离。恩，能与底边有点呼吸距离就更好了。&/div&
　　我们来看看这么写的好处吧：
　　1、外观依旧良好，结构清晰也没有破坏布局。
　　2、不会产生垂直外边距合并这样的问题。
　　3、书写规范、代码量减少、重用性好。
　　我们可以看到在middle_2中去除了不需要的border-top，改为更为实用的padding:20px
0，让middle_2中的内容有了足够的“呼吸空间”，以后还可以随时随地修改这个padding，让内容文字的“呼吸空间”增大或者缩小，随时随地只
修改一个middle_2的padding就能搞定所有包裹元素与内部内容的规划。
　　请注意这里是父元素应用padding，使得与其内容产生间隙，这是符合我们翻译为“补白”精髓（所以我一直喜欢称padding为“补白”而
不是内边距），而padding也恰恰是在这儿最能体检他的价值。这个例子把第一个元素的margin-top去除，在父元素中应用padding。反过
来，你会想，既然margin-top不好用，那么我第一个元素用padding-top不是也能达到效果么。恭喜你，你已经前进了一步了，的确使用
padding-top即让第一元素与外包裹元素产生了呼吸距离，而且也不会出现所谓的垂直外边距重叠问题，
但是我依旧不推荐你这么做。为什么呢？我们来设想这么一个情况吧，假如有一天，你这个模块要产生变动，新需求要删除这个firstChild，替换为
otherChild，会怎么样呢？
新的需求要求我们新加一个otherChild，替换原来的firstChild：
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&用Margin还是用Padding&/title&
.top{width:160 height:50 background:#}
.middle_3{width:160 background:#}
.middle_3 .otherChild{font-weight: font-style:}
.middle_3 .secondChild{margin-top:10}
&div class="top"&&/div&
&div class="middle_3"&
& &div class="otherChild"&我是新来的otherChild，我也想和我的父元素隔开点距离，这样看起来舒服，咦？！为什么我是在顶部？&/div&
& &div class="secondChild"&我是secondChild，我要和楼上隔开点的距离。恩，能与底边有点呼吸距离就更好了。&/div&
　　发现问题了么？如果你把原先的firstChild给删除掉了，新来的元素根本就没有定义上边距或者上补白，那么他就会自然顶在头部，不是理想的效
果。的确，你可以为了他新写一个css来让他距离头部多一点空隙，但是你该怎么写？直接改otherChild吗？如果其他页面里面也有
otherChild那么你会把其他地方的otherChild布局打乱。恩，那么我用.middle_3
.otherChild{padding-top:10}怎么样可以吧。恩，可以可以，可是你不觉得这么累吗？每次修改，都要增加这一个多余的代码
就为了简简单单的隔开点距离，久而久之，你的css文件代码会臃肿不堪，可移植性大大削弱。
　　每次开发的时候我一直对自己讲，你写的代码总有一天会被别的开发人员所替换、修改、更新。而一个优秀的前端写出的css不但在现在结构坚固并且
还能为日后的开发人员提供方便。修改我的代码，改前改后的式样位置都一样，让之后的开发人员根本上避免接触到再次“修复”开发的机会，那才是一名真正前端
的追求。这里你把包裹的div类似“封装”好一个环境，而且这个div内已经留有足够的内容的“呼吸空间”，你只需要改内容，内容所要考虑到得位置边距问
题，外包的div元素早已经帮你预留好了，你用起来方便，今后改起来也方便，直接找到middle修改padding即可。
发表评论：
TA的最新馆藏[转]&[转]&}