gpt4 book ai didi

html - 外部元素的边框会影响内部元素的边距如何显示,为什么?

转载 作者:搜寻专家 更新时间:2023-10-31 22:20:14 25 4
gpt4 key购买 nike

我想我只是部分地理解了它,现在我有另一个我不明白的问题。我有一个 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com