Question

每当div嵌套在另一个div中并且嵌套div通过CSS给出边距时，应该根据父/容器div设置边距。

但我已经尝试过，实际发生的事情是，孩子div的边距是根据最后一个元素设置的。而不是之前的div。

    <!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <title>Web Dev Checklist - Henry Spike</title>

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css?family=Ranga" rel="stylesheet">
        <style type="text/css">
            #main {
                background-color: #93628F;
                min-height: 100vh;
                height: 100%;
                color: white;
                font-family: 'Ranga', cursive;
            }
            #main-heading {
                margin-top: 100px;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="container">
                <div class="row" id="main-heading">
                    <div class="col-sm-12 text-center">
                        <h1>Web Developer Checklist - Henry Spike</h1>
                    </div>
                </div>
            </div>
        </div>

        <!-- jQuery first, then Tether, then Bootstrap JS. -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    </body>
</html>

输出可以在http://www.henryspike.tk/checklist上看到您可以看到背景颜色上方的空白区域，这意味着根据浏览器顶部/上一个元素设置边距。

我甚至在没有引导类的div上尝试过这个来检查这是否是一个Bootstrap问题。但它输出相同的结果

保证金不在嵌套div中工作，如引导程序中所假设的那样

0 个答案: