css外边距合并

来源：互联网发布：吉郎pop美工族手册编辑：程序博客网时间：2024/05/22 10:59

在平时的敲代码过程中，我们往往会遇到一个问题：margin-top不起作用。这是为什么呢？用官方的话来说：

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

应该是语文没学好，我看了好几遍也没能理解上面这段话，所以我用了一个更容易理解的方式来划分一下：

CSS外边距合并细分的话可以分为3种情况：

1).当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

#big1{width:100px;height:100px;background: blue;margin-bottom:0px;}#small1{width:100px;height:100px;background:yellow;margin-top:20px;}

这是只设置了下面div的上外边距的图片:

#big1{width:100px;height:100px;background: blue;margin-bottom:10px;}#small1{width:100px;height:100px;background:yellow;margin-top:20px;}

这是同时设置了上面div的下外边距和下面div的上外边距的图片:

我们对比上面两个图片，会发现这两个div垂直方向的距离完全一样，从而得出结论，

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。他们的外边距等于两个外边距中的较大值。

2) 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

#big2{width:100px;height:100px;background: blue;margin-top:0px;}#small2{width:50px;height:50px;background:yellow;margin-top:20px;}

这是只设置了里面div的上外边距的图片：

#big2{width:100px;height:100px;background: blue;margin-top:20px;}#small2{width:50px;height:50px;background:yellow;margin-top:0px;}

这是只设置了外面div的上外边距的图片：

#big2{width:100px;height:100px;background: blue;margin-top:20px;}#small2{width:50px;height:50px;background:yellow;margin-top:10px;}

这是设置了外面div的上外边距大于里面div的上外边距的图片：

我们对比上面三个图片，会发现这三个外面div的上外边距完全一样，从而得出结论，

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。他们的外边距等于两个外边距中的较大值。里面的元素与外面的元素无法产生上外边距。

3）假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

#big3{background: blue;margin-top:20px;margin-bottom:30px;}#small3{background:yellow;}

在这段css代码中,我设置上面的div没有高度，没有任何填充，并且设置了它的上外边距和下外边距。上外边距小于下外边距。

下面请看图片：

#big3{background: blue;margin-top:30px;margin-bottom:20px;}#small3{background:yellow;}

在这段css代码中,我设置上面的div没有高度，并且没有任何填充，并且设置了它的上外边距和下外边距。上外边距大于下外边距。

下面请看图片：

通过对比上面三个图片，会发现下面div距离顶部的高度一样，从而得出结论，

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们也会发生合并。他们的外边距仍然等于两个外边距中的较大值。

关于CSS外边距合并的实例，请戳下面链接：点击打开链接

上面三种情况就是我对外边距合并的一些理解，既然出现了外边距合并这种情况，当然也会有解决的方案，通过查阅资料以及自己多次的实验，我发现： 只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框(inline，inline-block)、浮动框(float)或绝对定位(position)之间的外边距不会合并。

这是只设置了里面div的上外边距的图片：

阅读全文

0 0

吉郎pop美工族手册

原创粉丝点击