我假设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;不是父元素容器和元素框之间的空格.我怎样才能在这两个元素之间添加空间(从上面)?