欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間：2020-05-11 11:45:43   作者：Angus安格斯   我要評論
這篇文章主要介紹了CSS中如何解決外邊距塌陷問題,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

首先我們先看出現(xiàn)外邊距塌陷的三種情況：

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

<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。

解決方法：

盡量只給一個盒子添加margin值

2.對于兩個嵌套關(guān)系的塊元素，如果父元素沒有上內(nèi)邊距及邊框，父元素的上外邊距會與子元素的上外邊距發(fā)生合并，合并后的外邊距為兩者中的較大者。

<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>

這時候兩個盒子會發(fā)生合并，上外邊距為20px。

解決辦法：

①給父元素定義上邊框

②給父元素定義上內(nèi)邊距

③給父元素添加 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的最大值。

到此這篇關(guān)于CSS中如何解決外邊距塌陷問題的文章就介紹到這了,更多相關(guān)CSS外邊距塌陷內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • 詳解overflow:hidden的作用(溢出隱藏、清除浮動、解決外邊距塌陷)

    overflow:hidden是當(dāng)元素內(nèi)的內(nèi)容溢出的時候使它隱藏溢出的部分，即超出部分隱藏。本文介紹了幾種用法，具有一定的參考價值，感興趣的可以了解一下
    2021-07-01

  • CSS中外邊距塌陷的八種解決方法

    margin-top塌陷是在CSS的盒子模型中出現(xiàn)的一種現(xiàn)象，本文就介紹了CSS中外邊距塌陷的八種解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)
    2023-05-31

最新評論