• <ol id="gebcs"></ol>
    <track id="gebcs"><i id="gebcs"></i></track>

    div嵌套引起的margin-top不起作用

    時間:2019-11-21 09:14:49 類型:HTML/CSS
    字號:    

    大家在制作網頁的過程中有時會遇到div嵌套引起的margin-top不起作用,對內部的div設置margin-top時,內部對于外部的div并沒有產生一個margin值,而是外部的div相對于上面的div產生了一個margin值,為什么會出現這種情況??

    這是因為嵌套div中margin-top出現轉移,在部分瀏覽器中,兩個嵌套的div,如果外層父元素div的padding值為0,那么內層div的margin-top,margin-bottom值都會轉移到父元素也就是外層div身上。

    <head>
        <title></title>
        <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
    
        .div1 {
            height: 500px;
            width: 100%;
            background: #ccc;
        }
    
        .div2 {
            height: 100px;
            width: 100px;
            background: red;
            margin-top: 100px;
        }
        </style>
    </head>
    
    <body>
        <div class="div1">
            <div class="div2"></div>
        </div>
    </body>

    由代碼可看出,div1嵌套div2,對div2設置margin-top是100px;

    2.jpg

    解決辦法:

    1.  給父元素div1設置一個padding值

    .div1{	height: 500px;	width: 100%;	background: #ccc;	padding-top: 1px;	}

     2.jpg

    2. 給父元素div1設置一個overflow:hidden;在不加overflow:Hidden;的時候,margin-top:這個屬性是認不到邊的,也就是失效。但是ie瀏覽器解決了這個問題,火狐、谷歌之類的就會出現失效,所以這是個標準問題,也是個兼容問題。

    .div1{	height: 500px;	width: 100%;	background: #ccc;	overflow: hidden;	}


    黄片基地 <