margin
margin指外边距,是盒子模型的组成之一(盒子=内容+边框+外边距+内边距),类似于表格中的cellspacing,具体用法如下:
- 一个值时,指定上右下左的外边距
- 两个值时,第一个值为上下外边距,第二个值为左右外边距
- 三个值时,第一个值为上外边距,第二个值为左右外边距,第三个值为下外边距
- 四个值时,分别对应上、右、下、左四个外边距
- 也可以单独设置,如margin-left,margin-top等
<div class="box"></div>
<div class="box1"></div>
<style>
.box {
width: 100px;
height: 100px;
background-color:rosybrown;
}
.box1 {
width: 100px;
height: 100px;
background-color: teal;
margin-top: 50px;
}
</style>
效果图为
外边距合并问题
外边距合并问题也称为外边距塌陷,大致有以下两种情况
1,相邻块元素之间的塌陷问题
比如两个垂直排列的元素,上一个元素设置了下外边距,而下面一个元素同时也设置了上外边距,一开始我们肯定会想当然的认为两个元素的距离肯定是两者之和,然而并不是,实际的距离应该是两者之间更大的那一个,这就是外边距塌陷问题。
此时肯定有人疑问怎么解决,其实解决办法也很简单,那就只设一个就可以了,要么只设上外边距,要么就只设置下外边距,不要多此一举就行。
2,嵌套块元素之间的塌陷问题
这是外边距合并的另一种情况,出现在父子元素之间,当父元素没有边框,且没有设置内边距时,如果里面的子盒子设置了上外边距,理论上是可以设置与父盒子之间的边距,但实际情况却不然,具体看下
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 200px;
height: 200px;
background-color: teal;
}
.son{
width: 100px;
height: 100px;
margin: 0 auto;
margin-top: 30px;
background-color: rosybrown;
}
</style>
效果图如下
可以看到,实际情况并非是子盒子与父盒子之间有了间距,反而间距作用到了父盒子身上,这就是嵌套元素之间的外边距塌陷,当父盒子也具有外边距时,会取两者之间更大的哪一个
针对这种情况有几种不同的解决办法
- 给父盒子设置一个上边框
- 想让父盒子与子盒子之间有间距,直接给父盒子设置内边距来实现,不要使用外边距
- 让父盒子形成一个BFC 区域
此处额外提一句BFC区域,简单来讲,BFC区域就是让里面的内容不再影响到外界,父盒子形成了BFC,子盒子的外边距自然无法影响外界。形成BFC区域也有几种不同的办法
- 浮动
- 固定定位和绝对定位
- overflow:hidden
- display:table