我想我只是部分地理解了它，现在我有另一个我不明白的问题。我有一个 id="signin"的 div，它位于其他 2 个 div 中。这 2 个 div 没有任何填充或边框，当我将 margin-top 应用于 id="signin"的 div 现在它不会在上面创建任何空白。为什么？ id="signin"旁边的 div 是否会以任何方式影响它？
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
body {margin: 0px;}
#top-bar {
background-color: #690203;
height: 40px;
}
.fixed-width {
width: 950px;
margin: auto;
}
#logo {
float: left;
}
#logo img {
border-right: 2px solid #752124;
padding: 9px;
}
#signin {
float: left;
width: 200px;
margin-left: 15px;
margin-top: 10px;
border: 1px solid deepskyblue;
}
</style>
</head>
<body>
<div id="top-bar">
<div class="fixed-width">
<div id="logo">
<img src="images/logo.png" width="20">
</div>
<div id="signin">
<!--<img src="images/signin.png" width="13">-->
<span>test test</span>
</div>
</div>
</div>
</body>
</html>最近开始学习css，遇到了一个看不懂的问题。我将一个 div 嵌套在另一个 div 中，当外部 div 有边框时，将边距与内部 div 一起使用会导致将内部 div 移动到外部 div 中，这就是我认为它应该工作的方式。但是，当外部 div 没有任何边框时，对内部 div 使用 margin 会导致外部 div 也移动，并在其上方创建一些空间。请看看并尝试解释为什么会这样。谢谢。
边框在#bigger
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#bigger {
width: 100px;
height: 100px;
background-color: deepskyblue;
border: 1px dashed black; /* border I use or don't use with the outer div */
}
#smaller {
margin-top: 10px;
width: 50px;
height: 50px;
background-color: deeppink;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="bigger">
<div id="smaller"></div>
</div>
</body>
</html>在#bigger 中没有边框
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#bigger {
width: 100px;
height: 100px;
background-color: deepskyblue;
}
#smaller {
margin-top: 10px;
width: 50px;
height: 50px;
background-color: deeppink;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="bigger">
<div id="smaller"></div>
</div>
</body>
</html>最佳答案
这是由于 CSS 使用 collapsing margins 造成的.
那个链接会比我更好地解释它，所以我建议你读一读，但给你一个简短的总结:
CSS 中的边距旨在显示在元素的外部。当处理其他元素中的元素时，这种行为会变得有点模糊，因为无论是在父元素内还是在父元素之外，都可以将边距视为在子元素之外。确定 margin's 也将始终寻求在所有父元素之外，除非该父元素具有阻止此逻辑为真的样式。例如，如果父级有边框，现在它上面有一些东西将子级与外界隔开，这意味着子级的边距必须属于父级的内部。如果不是，则没有分离，因此 child 的边缘会向外冒险。
如果您希望始终在父元素内留有边距，更好的选择可能是对父元素应用内边距，而不是对子元素应用边距。
关于html - 外部元素的边框会影响内部元素的边距如何显示，为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27611420/