温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的左右外边距不会合并。同样地，浮动元 & & & & &素外边距也不会合并，允许指定负的外边距值，不过使用时要小心。 such as：
margin：10px &5px &15px &20px
上 & & &右 & &下 & & 左 & & &外边距
margin：10px & &5px & &15px&
上 & & &左右 & & 下 & & & &外边距
margin：10px & & & &5px &
上下 & & & 左右 & & & & &外边距
margin： & &10px &
& & & & & & & &上下 左右 & & &外边距pading（内边距）：简写属性在一个声明中设置所有内边距属性。 说明：
这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计 & & & & 算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延 & & & & 伸穿过内边距。不允许指定负边距值。 such as：
pading：10px & &5px & &15px & &20px
上 & & & &右 & & &下 & & & 左 & & & & 内边距
pading：10px & & 5px & &15px &&
上 & & & 左右 & & &下 & & & & & 内边距
pading：10px & & &5px & & &
& & &&上下 & & &左右 & & & & & & &内边距
pading： & &10px & & & &
& & & & &上下 左右 & & & & & & &内边距
阅读(1084)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'外边距（margin）和内边距（pading）',
blogAbstract:'margin（外边距）：简写属性在一个声明中设置所有外边距属性。该属性有1到4个值（left，right，top，bottom） 说明：
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的左右外边距不会合并。同样地，浮动元 & & & & &素外边距也不会合并，允许指定负的外边距值，不过使用时要小心。 such as：
margin：10px &5px &15px &20px
blogTag:'html',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:8,
publishTime:3,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
写网页时总会遇到上外边距的合并，我的想法只是想让它和父元素上边留一些空白，我一般解决的方法是给父类加一个border-top：1px solid transparernt；不知大家一般是怎么解决的？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
外边距叠加：即当两个或更多垂直外边距相遇时，它们将形成一个外边距（高度为较大者）。情况有如下几种：
①两个同级上下元素
②祖先元素与内嵌元素（没有内边距或边框隔开,就祖先元素overflow:hidden/auto/scroll可有隔开的作用，避免叠加）
③本身是空元素时,自身上下外边距也会重合（没有边框或内边距隔开） ，当然前面几种情况可以结合发生。
只有普通文档流中，块框的垂直外边距才回发生叠加。行内框、浮动框或绝对（个人认为包括绝对定位和固定定位）定位框之间的外边距不会发生叠加。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
加overflow:auto或者改为padding-top这样的
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：CSS外边距合并：子元素的margin-top外边距被作用在父元素 - 雅兮网
你的位置： &
CSS外边距合并：子元素的margin-top外边距被作用在父元素
来自本站原创
[摘要] CSS外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。不理解此规范的话，会在前端布局中出现异常问题，本文深入浅出学习此规范，并提供解决办法。
不得不说前端是一个水很深的行业，虽然起点低，稍微一学就能入门；但是很多实操型的知识如各种兼容性、规范性问题不在实际操作中遇到是无法深刻的理解的，笔者就遇到了CSS外边距合并这一看似非主流却很主流的问题。
问题描述：
笔者想得到一个两个内套的盒子模型，并设置子盒子的上边距为50于是写了如下代码。
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&padding-demo&/title&
&style type="text/css"&
* {padding:0;margin:0;border:0;}
width: 600
background:
height: 300
.wrap .box {
font-size: 18
width: 300
height: 100
line-height: 100
background-color:
margin-top: 50
text-align:
&div class="wrap"&
&div class="box"&我是内容&/div&
但在浏览器中得到的确实下图的效果：
奇怪了，我明明是想让box在warp中有个上边距，为啥box紧贴了wrap，而wrap却有了个50px 的上边距，听说过子元素继承父元素的属性，还没见过父元素也会用子元素的属性。
赶紧学习了一下，是笔者才疏学浅了，原来这就是CSS外边距合并规范。引用w3school的定义是：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
这就很好理解笔者遇到的问题，子元素的margin-top:50px,直接遇到了父元素的margin：0，然后合并到父元素上了。
解决办法：
那么既然知道CSS有此规范，那有什么解决办法么？答案是肯定的！
父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。 为父元素例子中的wrap元素增加一个border-top或者padding-top即可解决这个问题。另外只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
解决方法：
修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）
为父元素添加overflow：hidden；样式即可（完美）
为父元素或者子元素声明浮动（float：left；可用）
为父元素添加border（border:1px solid transparent可用）
为父元素或者子元素声明绝对定位
所以我只需要给wrap增加一个overflow：hidden；就完美解决了，得到如下效果。
注：令人哭笑不得的是该问题在IE7/IE8下是不会出现的，却在现代浏览器上绊了一脚，不过看了文尾的解释后，你就知道它其实也是有意义的一个规范。
CSS外边距合并实例
另外用几张图片来更生动形象的描述CSS外边距合并这一“bug”。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：
尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。
外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。
如果认为本文对您有所帮助请赞助本站
支付宝扫一扫赞助微信扫一扫赞助
声明：凡注明“本站原创”的所有文字图片等资料，版权均属所有，欢迎转载，但务请注明出处；
与本文相关的文章
科技迷、外设控、WordPress爱好者，科技改变生活，用手中的键鼠将IT的乐趣分享给更多的人！
￥19.00券后价领券购买腾讯视频VIP会员 看战狼2
完美嵌入网站信息流布局 百度联盟PC-feed广告上线
雅兮网是一个关注互联网发展,聚焦互联网前沿资讯,交流最新IT产品心得,分享好玩的视频、软件,为广大互联网爱好者速递最有料资讯的IT科技博客。建立本站旨在与更多人分享使用电脑的快乐与精彩！
Copyright (C) &&丨 &丨 丨本站基于
构建， 托管于 &丨小菜学习日记—div嵌套导致子区域margin-top失效问题(外边距合并问题) - 小菜学习日记 - CSDN博客
小菜学习日记—div嵌套导致子区域margin-top失效问题(外边距合并问题)
小菜学习日记—html/css
小菜学习日记—div嵌套导致子区域margin-top失效问题(外边距合并问题)
CSS布局中margin-top属性失效的解决方法，常见的有两种情况，一种是普通的margin-top失效，另一种就是子元素设置margin-top作用于父容器。
关于margin-top属性失效的解决方法
常出现两种情况：
（一）margin-top失效
先看下面代码：
&divclassdivclass="box1"&float:left&/div&
&divclassdivclass="box2"&clear:margin-top:20&/div&
两个层box1和box2，box1具有浮动属性，box2没有，这时候设置box2的上边距margin-top没有效果。
网上能找到的两种比较靠谱的解释：
1：“在CSS2.1中，水平的margin不会被折叠；垂直margin可能在一些盒模型中被折叠…”
2：当第一个层浮动，而第二个没浮动层的margin会被压缩，详见–浮动元素后非浮动元素的margin的处理。
得到解决问题思路：要浮动一起浮动，要就一起不浮动。
解决办法：
1.box2增加float属性
2.box1与box2之间增加一层”
&divclassdivclass="box"style="height:100background:"&
&divclassdivclass="box2"&clear:
margin-top:20height:50width:500
background:
当给box2设置margin-top时，在FF下仅作用于父容器。
解决办法：
1.给父容器box加overflow:属性
2.父容器box加border除none以外的属性
3.用父容器box的padding-top代替margin-top
我的热门文章在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
写网页时总会遇到上外边距的合并，我的想法只是想让它和父元素上边留一些空白，我一般解决的方法是给父类加一个border-top：1px solid transparernt；不知大家一般是怎么解决的？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
加overflow:auto或者改为padding-top这样的
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
外边距叠加：即当两个或更多垂直外边距相遇时，它们将形成一个外边距（高度为较大者）。情况有如下几种：
①两个同级上下元素
②祖先元素与内嵌元素（没有内边距或边框隔开,就祖先元素overflow:hidden/auto/scroll可有隔开的作用，避免叠加）
③本身是空元素时,自身上下外边距也会重合（没有边框或内边距隔开） ，当然前面几种情况可以结合发生。
只有普通文档流中，块框的垂直外边距才回发生叠加。行内框、浮动框或绝对（个人认为包括绝对定位和固定定位）定位框之间的外边距不会发生叠加。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
加一个属性，overflow设置为hidden，看看行不行。与bfc有关。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：