CSS中如何解決外邊距塌陷問題？

時間 2020-05-12

標籤 css 如何解決邊距問題欄目 CSS 简体版

原文原文鏈接

首先咱們先看出現外邊距塌陷的三種狀況：bash

1.當上下相鄰的兩個塊級元素相遇，上面的元素有下邊距margin-bottom，下面的元素有上邊距margin-top，則它們之間的垂直距離取兩個值中的較大者。spa

<style>
  .box1 {
     width: 150px;
     height: 100px;
     margin-bottom: 20px;
     background-color: rgb(201, 239, 98);
  }
  .box2 {
     width: 100px;
     height: 100px;
     background-color: rebeccapurple;
     margin-top: 10px;
  }
</style>
   <div class="box1"></div>
   <div class="box2"></div>複製代碼

這時候兩個盒子之間的垂直距離不是30px，而是20px。code

解決方法：string

儘可能只給一個盒子添加margin值class

2.對於兩個嵌套關係的塊元素，若是父元素沒有上內邊距及邊框，父元素的上外邊距會與子元素的上外邊距發生合併，合併後的外邊距爲二者中的較大者。方法

<style>
        .box1 {
            width: 150px;
            height: 100px;
            margin-top: 20px; 
            /* border: 1px solid #000000; */
            background-color: red;
        }

        .box2 {
            width: 100px;
            height: 100px;
            /* border: 1px solid #000000; */
            background-color: rebeccapurple;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>複製代碼

這時候兩個盒子會發生合併，上外邊距爲20px。margin

解決辦法：top

①給父元素定義上邊框di

②給父元素定義上內邊距copy

③給父元素添加 overflow：hidden；

④添加浮動

⑤添加絕對定位

3.若是存在一個空的塊級元素，border、padding、inline content、height、min-height都不存在，那麼上下邊距中間將沒有任何阻隔，上下外邊距將會合並。

<p style="margin-bottom: 0px;">這個段落的和下面段落的距離將爲20px</p>

<div style="margin-top: 20px; margin-bottom: 20px;"></div>

<p style="margin-top: 0px;">這個段落的和上面段落的距離將爲20px</p>複製代碼

能夠理解成中間div寬度爲0且上下邊距融合，只取margin的最大值。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。