外边距的垂直方向上的合并现象

来源：互联网发布：手机如何收看网络电视编辑：程序博客网时间：2024/04/30 19:07

补充一个属性知识点：

overflow属性：如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为.

---------------------------分割线--------------------------

在此之前我们都学习了margin属性，这是一个外边距属性。

水平方向上的外边距是可以叠加的。

这是怎么个意思呢？

例如：

<!DOCTYPE html><html lang="en"><head>    <meta chars et="UTF-8">    <title>外边距的合并现象</title>    <style type="text/css">        span{            display: inline-block;     width: 100px;    height: 100px;    border: 1px solid #000;}        div{            height: 100px;            border:1px solid #000;        }        .hezi1{            margin-right: 50px;        }        .hezi2{            margin-left: 50px;        }    </style></head><body>                <span class="hezi1">我是span</span>                <span class="hezi2">我是span</span>                <div class="box1">我是div</div>                <div class="box2">我是div</div></body></html>

左边的span标签距离右边的span标签是50px，而右边的span标签距离左边的span是100px，因此通过水平方向上的外边距叠加可以得知：两个span标签的水平外边距是150px

但是在垂直方向上，就会出现外边距的合并现象：

在垂直方向上，默认情况下外边距是不会叠加的，会出项合并现象（谁的外边距比较大，就听谁的）

例如：

<!DOCTYPE html><html lang="en"><head>    <meta chars et="UTF-8">    <title>外边距的合并现象</title>    <style type="text/css">        span{            display: inline-block;     width: 100px;    height: 100px;    border: 1px solid #000;}        div{            height: 100px;            border:1px solid #000;        }        .hezi1{            margin-right: 50px;        }        .hezi2{            margin-left: 50px;        }        .box1{            margin-bottom: 50px;        }        .box2{            margin-top: 100px;        }    </style></head><body>                <span class="hezi1">我是span</span>                <span class="hezi2">我是span</span>                <div class="box1">我是div</div>                <div class="box2">我是div</div></body></html>

可以通过两个div标签的垂直方向的外边距来仔细理解一下外边距的垂直方向上的外边距合并现象

0 0