• 958阅读
  • 2回复

CSS的外边距合并问题 [复制链接]

上一主题 下一主题
离线啊冲
 

只看楼主 倒序阅读 使用道具 楼主  发表于: 2016-02-02


CSS的外边距合并问题

发表于 2015 年 11 月 14 日

昨天写了那个盒子模型,今早把外层DIV的border去掉后,发现内层的margin-top不起作用了,于是上网找答案,在w3school找到了问题,也就是外边距合并问题

第一种情况,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。看下图 :



这里是html测试源码
<html>
<head>
<title>CSS盒子模型</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
<div></div>
<div></div>
</body>
</html>
这里是CSS测试源码
.wrapper{
margin-bottom:20px;                    /*让这个盒子居中显示             */
width:200px;
height:200px;
background-color:gray;
border-radius:10px;
box-shadow:5px 5px 5px red;
}

.wrapper1{
margin-top:10px;
width:200px;
height:200px;
background-color:red;
border-radius:10px;
box-shadow:5px 5px 5px red;
}


第二种情况,当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。看下图:




下面是html源码



<html>


<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body style="margin:0">
<div id="outer">
<div id="inner"></div>
</div>
</body>
</html>


下面是css源码




#outer {
width:300px;
height:300px;
background-color:red;
margin-top:10px;
}



#inner {
width:200px;
height:200px;
background-color:blue;
margin-top:20px;
}

如上图所示,之所以出现这种情况,第一是因为这是普通文档流,如果浮动和行内框,则不会出现这种情况,第二就是如果外层DIV设置了Border或者padding,则不会出现这种情况,下面四组方法可以杜绝合并:
1:   把boder:5px solid yellow;    
2:  display:inline-block;      
3:   float:left;  
4:   padding-top:5px;      
把上面的任意一个代码插入到#outer中,都不会出现外边距合并,下面是加入Border后的显示结果:





既然这样,为什么还有外间距合并的问题呢,这里直接饮用w3school的话了:
外边距合并初看上去可能有点奇怪,但是实际上,它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外 边距合并,后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并,段落之间的上外边 距和下外边距就合并在一起,这样各处的距离就一致了。


注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。


善者 慈悲心常在 无怨无恨 以苦为乐
默认压缩密码www.hifyl.com
文件分享密码问题:http://www.hifyl.com/read-htm-tid-4444.html
离线v2680267313

只看该作者 沙发  发表于: 2016-04-30
用户被禁言,该主题自动屏蔽!
离线tbno9

只看该作者 板凳  发表于: 2017-08-06
没机会改好后发给十多个沙发上地方
快速回复
限100 字节
如果您在写长篇帖子又不马上发表,建议存为草稿
 
上一个 下一个