父子级
基本页面
html结构:
<div class="father">
<div class="son"></div>
</div>
css样式:
* {
margin: 0;
padding: 0;
}
.father {
height: 200px;
width: 200px;
background-color: pink;
}
.son {
height: 100px;
width: 100px;
background-color: red;
}
当我们给父子级各加上一个margin-top的时候,会发现以下效果
原本设想会子元素也会相对于父元素向上有一个外边距,但是并没有
这是因为子元素碰不到父元素有效的border或者padding,就会不断的一层一层的找自己的父元素的border或者padding,这样越级,最终碰到页面的body有padding则会以这个为基准
解决方案
-
给父元素添加边框或者加上padding
.father { height: 200px; width: 200px; background-color: pink; margin-top: 10px; border:1px soild red;/*或者 padding-top: .1px; */ }
-
给父元素清除浮动 overflow:hidden overflow:auto 相当于开启了一个BFC
.father { height: 200px; width: 200px; background-color: pink; margin-top: 10px; /* overflow:hidden; */ overflow:auto; }
-
给父子元素一方设置display:inline-block 开启了一个BFC
.father { height: 200px; width: 200px; background-color: pink; margin-top: 10px; display: inline-block; }
兄弟级
将所要元素之间的margin的大小之和直接设在其中一个元素上即可。
页面html
<div class="box1"></div>
<div class="box2"></div>
css
.box1 {
width: 200px;
height: 200px;
background-color: pink;
margin-bottom: 20px;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
margin-top: 10px;
}
页面效果
此时中间空隙是20px 若想是30px
则给其中的一个元素设置margin即可
css
.box2 {
width: 100px;
height: 100px;
background-color: red;
margin-top: 30px;
}
或者
.box1 {
width: 200px;
height: 200px;
background-color: pink;
margin-bottom: 30px;
}
页面效果