外边距问题与解决

外边距问题及解决方法

## 1、兄弟关系外间距塌陷问题

```html

兄弟关系外间距塌陷问题

        现象：元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象；

        两个值一样大，取当前值

        两个值不同，取较大值

        原因：并列关系的两个元素共用了一个外间距区域

        解决办法：

        分别给这两个元素套一个父元素，并为父元素设置overflow:'hidden'

         .box1 {

            width: 100px;

            height: 100px;

            background-color: yellow;

            margin-bottom: 50px;

        }

        .box2 {

            width: 100px;

            height: 100px;

            background-color: red;

            margin-top: 100px;

        }

        .father1,

        .father2 {

            overflow: hidden;

        }

     <div class="father1">

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

    </div>

    <div class="father2">

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

    </div>

```

## 2、父子关系外间距塌陷

```html

父子关系外间距塌陷

       现象：

       1.元素嵌套关系，子元素的margin-top值会叠加给父元素；

       2.如果父元素也有margin-top值，会与子元素的margin-top值合并，取两者较大值；

       原因：

       父元素和子元素公用一个上外边距区域

       解决方法：

       1.为父元素设置上边框或者上填充

       2.为父元素设置overflo：hidden；

       3.转换思路，巧用padding，规避margin

        .father {

            width: 200px;

            height: 200px;

            background-color: tomato;

            margin-top: 100px;

            /* border-top: 2px solid royalblue;

            padding-top: 1px; */

            overflow: hidden;

        }

        .son {

            width: 100px;

            height: 100px;

            background: blue;

            margin-top: 50px;

        }

        .father1 {

            width: 200px;

            height: 200px;

            background-color: purple;

            padding-top: 20px;

        }

        .son1 {

            width: 100px;

            height: 100px;

            background: pink;

            /* padding-top: 10px; */

        }

   <div class="father">

        <div class="son"></div>

    </div>

    <hr>

    <div class="father1">

        <div class="son1"></div>

    </div>

```

最后

以上就是拼搏枕头为你收集整理的外边距问题与解决的全部内容，希望文章能够帮你解决外边距问题与解决所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。