margin的兩個(gè)有趣現(xiàn)象：margin合并和margin塌陷

james 發(fā)布于2019-04-23 13:18 / 1552人閱讀

摘要：有兩個(gè)，包含，給一個(gè)，讓和之間產(chǎn)生的距離結(jié)果會(huì)發(fā)現(xiàn)和沒(méi)產(chǎn)生距離，反而是帶著離頁(yè)面頂端解決辦法給父級(jí)盒子設(shè)置給父級(jí)盒子設(shè)置給父級(jí)盒子設(shè)置

margin合并

當(dāng)兩個(gè)元素在垂直方向并列，分別設(shè)置margin值時(shí)會(huì)發(fā)生一個(gè)margin合并的現(xiàn)象

舉個(gè)例子，有兩個(gè)div，垂直并列，box1設(shè)置margin-bottom:20px，box2設(shè)置margin-top:50px，

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testtitle>
    <style type="text/css">
    *{
        margin：0;
        padding: 0;
    }
    div{
        width: 50px;
        height: 50px;
    }
    #box1{
        margin-bottom: 20px;
        background: red;
    }
    #box2{
        margin-top: 50px;
        background: blue;
    }
    style>
head>
<body>
    <div id="box1">div>
    <div id="box2">div>
body>
html>

按照一般的思維，這兩個(gè)div之間的距離就應(yīng)該是70px，事實(shí)并非如此，兩個(gè)div之間的距離只有50px，因?yàn)閮蓚€(gè)div的margin重疊，它會(huì)取最大值

? ? ? ? ? ? ? ?

一般來(lái)說(shuō)margin合并不常見(jiàn)，因?yàn)橹恍柙O(shè)置一個(gè)div的margin來(lái)達(dá)到二者之間的距離就可以了

margin塌陷

margin塌陷很常見(jiàn)，存在于嵌套關(guān)系的盒子之間。

有兩個(gè)div，box1包含box2，給box2一個(gè)margin-top:20px，讓box2和box1之間產(chǎn)生20px的距離

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testtitle>
    <style type="text/css">
    *{
        margin：0;
        padding: 0;
    }
    #box1{
        width: 100px;
        height: 100px;
        background: red;
    }
    #box2{
        width: 50px;
        height: 50px;
        margin-top: 20px;
        background: blue;
    }
    style>
head>
<body>
    <div id="box1">
        <div id="box2">div>
    div>
body>
html>

結(jié)果會(huì)發(fā)現(xiàn)box1和box2沒(méi)產(chǎn)生距離，反而是box1帶著box2離頁(yè)面頂端20px

? ? ? ? ? ?

解決辦法：

給父級(jí)盒子設(shè)置overflow:hidden
給父級(jí)盒子設(shè)置border
給父級(jí)盒子設(shè)置padding

GPU云服務(wù)器云服務(wù)器 margin: margins margin margin縮寫(xiě)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/1704.html

相關(guān)文章

關(guān)于CSS外邊距塌陷的問(wèn)題

摘要：關(guān)于外邊距塌陷合并的問(wèn)題主要資料來(lái)源定義塊的頂部外邊距和底部外邊距有時(shí)被組合折疊為單個(gè)邊框，其大小是組合到其中的最大外邊距，這種行為稱(chēng)為外邊距塌陷合并發(fā)生外邊距塌陷的三種情況相鄰的兄弟姐妹元素此時(shí)兩個(gè)中間的距離并不是，而是。關(guān)于CSS外邊距塌陷（合并）的問(wèn)題主要資料來(lái)源：https://developer.mozilla.org... 定義塊的頂部外邊距和底部外邊距有時(shí)被組合（...

SunZhaopeng 2019-08-01 17:35 評(píng)論0 收藏0
關(guān)于CSS外邊距塌陷的問(wèn)題

摘要：關(guān)于外邊距塌陷合并的問(wèn)題主要資料來(lái)源定義塊的頂部外邊距和底部外邊距有時(shí)被組合折疊為單個(gè)邊框，其大小是組合到其中的最大外邊距，這種行為稱(chēng)為外邊距塌陷合并發(fā)生外邊距塌陷的三種情況相鄰的兄弟姐妹元素此時(shí)兩個(gè)中間的距離并不是，而是。關(guān)于CSS外邊距塌陷（合并）的問(wèn)題主要資料來(lái)源：https://developer.mozilla.org... 定義塊的頂部外邊距和底部外邊距有時(shí)被組合（...

cyrils 2019-08-29 13:24 評(píng)論0 收藏0
web前端（11）—— 頁(yè)面布局1

摘要：維護(hù)起來(lái)更加方便不足雪碧的最大問(wèn)題是內(nèi)存使用拼圖維護(hù)比較麻煩使的編寫(xiě)變得困難雪碧調(diào)用的圖片不能被打印我們可以使用綜合屬性制作通天，什么是通天呢，就是一般我們電腦的屏幕都是但是設(shè)計(jì)師給我們的圖都會(huì)比這個(gè)大，那么我們可以此屬性來(lái)制作通天。要說(shuō)頁(yè)面布局的話(huà)，那就必須說(shuō)說(shuō)margin，padding，和background。這三個(gè)屬性其實(shí)都是前面講過(guò)的，這里還是再次講解以下，為什么呢？因?yàn)槭沁@樣的...

番茄西紅柿 2019-04-23 13:11 評(píng)論0 收藏0
網(wǎng)頁(yè)標(biāo)準(zhǔn)文檔流中垂直方向的margin塌陷現(xiàn)象

摘要：在標(biāo)準(zhǔn)文檔流中即沒(méi)有浮動(dòng)，如果設(shè)置了浮動(dòng)那就不會(huì)出現(xiàn)這中情況了，中有兩個(gè)元素，這兩個(gè)元素的寬高都是，第一個(gè)設(shè)置了第二個(gè)設(shè)置了，那么實(shí)際上兩個(gè)元素之間的距離是，這就是塌陷現(xiàn)象，并且塌陷還是以大的一方為準(zhǔn)。在標(biāo)準(zhǔn)文檔流中（即沒(méi)有浮動(dòng)，如果設(shè)置了浮動(dòng)那就不會(huì)出現(xiàn)這中情況了），body中有兩個(gè)div元素，這兩個(gè)div元素的寬、高都是200px，第一個(gè)div設(shè)置了margin-bottom:t...

flybywind 2019-08-30 15:55 評(píng)論0 收藏0
網(wǎng)頁(yè)標(biāo)準(zhǔn)文檔流中垂直方向的margin塌陷現(xiàn)象

摘要：在標(biāo)準(zhǔn)文檔流中即沒(méi)有浮動(dòng)，如果設(shè)置了浮動(dòng)那就不會(huì)出現(xiàn)這中情況了，中有兩個(gè)元素，這兩個(gè)元素的寬高都是，第一個(gè)設(shè)置了第二個(gè)設(shè)置了，那么實(shí)際上兩個(gè)元素之間的距離是，這就是塌陷現(xiàn)象，并且塌陷還是以大的一方為準(zhǔn)。在標(biāo)準(zhǔn)文檔流中（即沒(méi)有浮動(dòng)，如果設(shè)置了浮動(dòng)那就不會(huì)出現(xiàn)這中情況了），body中有兩個(gè)div元素，這兩個(gè)div元素的寬、高都是200px，第一個(gè)div設(shè)置了margin-bottom:t...

simon_chen 2019-08-02 14:01 評(píng)論0 收藏0