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

最新推荐文章于 2024-05-14 02:24:22 发布

叫我邱球球

最新推荐文章于 2024-05-14 02:24:22 发布

阅读量572

点赞数

分类专栏：有关CSS 文章标签：属性 css 心得前端博客

本文链接：https://blog.csdn.net/CallMeQiuqiuqiu/article/details/60142232

版权

有关CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

补充一个属性知识点：

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

收藏

觉得还不错? 一键收藏
0
评论
外边距的垂直方向上的合并现象

补充一个属性知识点：overflow属性：如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为.---------------------------分割线--------------------------在此之前我们都学习了margin属性，这是一个外边距属性。水平方向上的外边距是可以叠加的。这是怎么个意思呢？例如：
复制链接

扫一扫

专栏目录