CSS中的边距是啥？ [复制]
Posted
技术标签:
【中文标题】CSS中的边距是啥？ [复制]【英文标题】：What is margin in CSS? [duplicate]CSS中的边距是什么？ [复制] 【发布时间】：2016-08-02 23:20:06 【问题描述】：我很久以前就假设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>
您将看到如下截图所示的输出。
我的margin-top:50px; 不是父元素container 和元素box 之间的空间。如何在这两个元素之间添加空格（从上方）？
【问题讨论】：
【参考方案1】：将 padding-top 添加到您的#container：
#container padding-top: 50px;
【讨论】：
你可以解释你的答案。但是，这并不能解决问题 您想在容器和容器盒之间留出边距？【参考方案2】：你没看错什么是边距。我认为您的实际问题是“为什么margin-top 在这里不起作用？”。
如果我没记错的话，这是collapsing margins 的情况：在某些情况下，两个元素的垂直边距会合并。 （请注意在您的示例中 是 的上边距，它只是在外框上。）
您可以尝试那里提到的解决方案之一（例如，浮动内框），或者改为在外框添加填充。
【讨论】：
谢谢先生！正如您所描述的，我的实际问题是“为什么margin-top 在这里不起作用”。您建议的链接是我的问题的解决方案，我的问题似乎与它重复。【参考方案3】：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box Model</title>
<style type="text/css">
#container:before, #container:aftercontent:''; display:table;
#container:afterclear:both
#containerzoom:1;
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>【讨论】：
【参考方案4】：你的代码是正确的。
但您需要将这些行添加到您的 #container 和 #container .box 类中。
display:inline-block;
position:relative;
了解更多关于显示和位置的信息：http://www.w3schools.com
你的最终代码：
<!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;
display:inline-block;
position:relative;
#container .box
background-color: slategrey;
width : 200px;
height : 200px;
display:inline-block;
position:relative;
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>
【讨论】：
以上是关于CSS中的边距是啥？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章