HTML中div嵌套div的margin不起做用

時間 2020-08-06

標籤 html div 嵌套 margin 不起欄目 HTML 简体版

原文原文鏈接

下面介紹一下div嵌套div時margin不起做用的解決方案。css

順便科普下margin的定義和用法。html

div嵌套的HTML代碼：spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 100%;
            height: 100%;
            background-color: dodgerblue;
        }
        .box{
            width: 300px;
            height: 300px;
            margin: 30px;
            background-color: gray;
        }
        .box .child{
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color:darkturquoise;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child">

        </div>
    </div>
</body>
</html>

實際效果：3d

這其實不是咱們想要的效果，先來講下爲何會出現這個問題：code

有兩個嵌套關係的div，若是外層div的父元素padding值爲0，那麼內層div的margin-top或者margin-bottom的值會「轉移」給外層div。orm

解決該問題咱們須要先了解ie特有的一個屬性haslayout。htm

咱們要實現的效果是這樣的：blog

最後咱們來講一下解決方法：it

一、讓父元素生成一個block formating context（塊級格式化上下文，可自行百度瞭解），如下屬性能夠實現io

float: left/right

position: absolute

display: inline-block

overflow: hidden/auto

二、給父元素添加border或者padding

以方法一的overflow:hidden爲例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 100%;
            height: 100%;
            background-color: dodgerblue;
        }
        .box{
            width: 300px;
            height: 300px;
            margin: 30px;
            background-color: gray;
            overflow: hidden;
        }
        .box .child{
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color:darkturquoise;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child">

        </div>
    </div>
</body>
</html>