<!-- 一个元素嵌套到另一个元素,他们都有外边距,会折叠;
1.只要两个垂直外边据碰到一起就会折叠,即使是一个元素嵌套到另一个元素中也不例外;但是
如果外面的元素有一个边框,那么两个元素的外边距就不会碰到一起,这样就不会折叠;但是边框去掉就会折叠-->
<!-- 浏览器:块元素,上下放置,外边距高度就是最大的外边距高度,譬如这里的first外边据是10px;second外边据是20px;那么
这里两个块元素之间的距离是20px,切记.
两个块元素之间的外边据就是二者中比较大的那一个;如果两个外边距是相同的那么就会折叠在一起;
譬如都是10像素,那么总共也是10像素
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于块元素</title>
<!-- 一个元素嵌套到另一个元素,他们都有外边距,会折叠;
1.只要两个垂直外边据碰到一起就会折叠,即使是一个元素嵌套到另一个元素中也不例外;但是
如果外面的元素有一个边框,那么两个元素的外边距就不会碰到一起,这样就不会折叠;但是边框去掉就会折叠-->
<!-- 浏览器:块元素,上下放置,外边距高度就是最大的外边距高度,譬如这里的first外边据是10px;second外边据是20px;那么
这里两个块元素之间的距离是20px,切记.
两个块元素之间的外边据就是二者中比较大的那一个;如果两个外边距是相同的那么就会折叠在一起;
譬如都是10像素,那么总共也是10像素
-->
<style type="text/css">
#first{
width: 500px;
height: 70px;
background-color: #7FFFD4;
margin-bottom: 20px;
/* border: 2px solid red; */
}
#second{
width: 500px;
height: 70px;
margin-top: 20px;
background-color: #0000FF;
border: thin solid red;
}
span{
margin-left: 10px;
margin-right: 10px;
}
#third{
width: 100px;
height: 30px;
background-color: #FFFF00;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="first">
<span>
第一个
</span>
<span>
第二个
</span>
<br>
内联元素: 左边外边据是10px ;右边外边据是10px;那么两个元素之间会有10+10也就是20px的空间
</div>
<div id="second">
<div id="third">
</div>
</div>
</body>
</html>
424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
