您现在的位置是：主页 > news > 中山发布最新通知/seo实战密码电子书

中山发布最新通知/seo实战密码电子书

admin2025/5/5 9:52:43【news】

简介中山发布最新通知,seo实战密码电子书,flash网站怎么做音乐停止,网站建设的战略作用一.外边距合并外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。注：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间…

中山发布最新通知,seo实战密码电子书,flash网站怎么做音乐停止,网站建设的战略作用一.外边距合并外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。注：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间…

一.外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

注：只有普通文档流中块框的垂直外边距才会发生外边距合并。

行内框、浮动框或绝对定位之间的外边距不会合并。

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

接下来看一下这个例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外边距合并的塌陷</title>
</head>
<style>.box{background: blueviolet;width: 300px;height: 300px;}.in-box1{background: red;width: 200px;height: 200px;margin-top: 100px;}.in-box2{background: blue;width: 100px;height: 100px;margin-top: 50px;}
</style>
<body><div class="box"><div class="in-box1"><div class="in-box2"></div></div></div>
</body>
</html>

运行代码会发现出现以下结果：

这是因为紫色块外边距为0，红色为100px，蓝色为50px，三者最大为100px，所以合并为100px，这和我们预期的效果不符，那么如何来解决这种情况呢有以下三种方法。

二.解决办法

第一种：利用border

为父元素添加上边框，将css中的代码改为如下模样：

<style>.box{background: blueviolet;width: 300px;height: 300px;margin-top: 0;border-top: 1px solid blueviolet;}.in-box1{background: red;width: 200px;height: 200px;margin-top: 100px;border-top: 1px solid red;}.in-box2{background: blue;width: 100px;height: 100px;margin-top: 50px;}
</style>

第二种: 利用padding

为父元素添加内边距

<style>.box{background: blueviolet;width: 300px;height: 300px;margin-top: 0;/* border-top: 1px solid blueviolet; */padding: 1px;}.in-box1{background: red;width: 200px;height: 200px;margin-top: 100px;/* border-top: 1px solid red; */padding: 1px;}.in-box2{background: blue;width: 100px;height: 100px;margin-top: 50px;}
</style>

第三种：利用overflow：hidden

为父元素设置overflow：hidden

<style>.box{background: blueviolet;width: 300px;height: 300px;margin-top: 0;overflow: hidden;/* border-top: 1px solid blueviolet;padding: 1px; */}.in-box1{background: red;width: 200px;height: 200px;margin-top: 100px;overflow: hidden;/* border-top: 1px solid red;padding: 1px; */}.in-box2{background: blue;width: 100px;height: 100px;margin-top: 50px;}
</style>

结果如下：