<thead id="rrjt3"></thead>
      <progress id="rrjt3"><dfn id="rrjt3"></dfn></progress>

      <em id="rrjt3"></em>

        <address id="rrjt3"><ins id="rrjt3"><dfn id="rrjt3"></dfn></ins></address>
          <i id="rrjt3"></i>

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


        黄网站免费 <