<dd id="t699n"></dd>

  • <em id="t699n"></em>

    1. <dd id="t699n"></dd>

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


      黄网站免费 <