CSS中的保证金是多少?

Cat*_*ysm 6 html css

我假设margin是很久以前父元素和它自身之间的空间.但我认为这不是真的.请使用CSS查看下面的简短HTML.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box Model</title>
<style type="text/css">
    body {
    background-color: #ccc;
    }
    header {
        text-align: center;
        text-decoration: underline;
        font-weight: bold;
    }
    #container {
        background-color: grey;
        width : 400px;
        height : 400px;
    }
    #container .box {
        background-color: slategrey;
        width : 200px;
        height : 200px; 
        color : #fff;   
        border: 5px solid navy;
        margin-top: 50px;
        margin-left:50px;
        padding-top:20px;
        padding-left:20px;
    }
</style>
</head>
<body>
    <header>Box Model Example</header>
    <section>
        <div id="container">
            <div class="box">Content</div>
        </div>
    </section>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

您将在下面的屏幕截图中看到输出. 在此输入图像描述

margin-top:50px;不是父元素容器和元素之间的空格.我怎样才能在这两个元素之间添加空间(从上面)?

vvy*_*vye 6

什么是保证金,你没有错.我认为你的实际问题是"为什么margin-top不在这里工作?".

如果我没有弄错的话,这是一个崩溃边缘的情况:在某些情况下,两个元素的垂直边距将结合起来.(注意如何有你的榜样顶边,它只是所有的外包装盒.)

您可以尝试其中提到的解决方案之一(例如,浮动内部框),或者在外部框中添加填充.