Html第12集：外边距重叠

赵彦军

已于 2022-10-09 15:12:19 修改

阅读量457

点赞数 1

分类专栏：前端学习笔记文章标签： html 前端 css

于 2022-10-09 15:11:44 首次发布

本文链接：https://blog.csdn.net/zhaoyanjun6/article/details/127226586

版权

前端学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

转载请标明出处：http://blog.csdn.net/zhaoyanjun6/article/details/127226586
本文出自【赵彦军的博客】

文章目录

一、概念
二、兄弟元素
三、父子元素
四、四种解决方案

一、概念

一般是指垂直方向相邻的外边距会发生重叠现象，大多发生在兄弟元素和父子元素之间。

二、兄弟元素

box2是box1的兄弟元素

当两者都是正值时：取二者之间的最大值

   <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: tomato;
            margin-bottom:50px;   
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            margin-top:50px;   
        }
    </style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

外边距都是50，取最大值所以它们之间的间隔也是50。

在这里插入图片描述

一正一负：取二者之和

 <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: tomato;
            margin-bottom:-50px;   
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            margin-top:50px;   
        }
    </style>

在这里插入图片描述
-50+50=0，所以他们之间的间距是0。

两个都负值：取绝对值较大的

 <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: tomato;
            margin-bottom:0px;   
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            margin-top:-100px;   
        }
    </style>

-100的绝对值较大，所以box2向上移动100

在这里插入图片描述

三、父子元素

box2是box1的子元素

   <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: #bfa;
        }
    </style>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    
</body>
</html>

在这里插入图片描述

当box2的上外边距设置为100：

<style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            margin-top:100px;   
        }
    </style>

在这里插入图片描述

四、四种解决方案

给父元素加上内边距，然后再裁去多余的长度

<style>

        .box1 {
            width: 200px;
            height: 200px;
            background-color: tomato;
            padding-top: 100px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: #bfa;
        }

</style>

<div class="box1">

    <div class="box2"></div>

</div>

在这里插入图片描述

赵彦军

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html第12集：外边距重叠

一般是指垂直方向相邻的外边距会发生重叠现象，大多发生在兄弟元素和父子元素之间。外边距都是50，取最大值所以它们之间的间隔也是50。-100的绝对值较大，所以box2向上移动100。-50+50=0，所以他们之间的间距是0。box2是box1的兄弟元素。box2是box1的子元素。
复制链接

扫一扫