<b id="wionh"></b>

<u id="wionh"><address id="wionh"><meter id="wionh"></meter></address></u>

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


中文无码妇乱子二区三区_久久亚洲精品无码福利播放_毛片一级_日韩aⅴ无码久久精品免费

<b id="wionh"></b>

<u id="wionh"><address id="wionh"><meter id="wionh"></meter></address></u>

<