gpt4 book ai didi

css - 调整容器 div 内部 div 的边距顶部会将内部 div 和容器 div 从 body 向下推

转载 作者:技术小花猫 更新时间:2023-10-29 12:23:08 25 4
gpt4 key购买 nike

我觉得这一定是我做了一些傻事的问题,但我想不通。 Here's a demo page showing my problem.页面来源:

<html>
<head>
<title>demo</title>
<style type='text/css'>
body{
margin: 0px;
padding: 0px;
}
#container{
height: 100%;
background-color: black;
}
#logo{
margin: 25px auto auto auto;
width: 360px;
height: 45px;
background-color: goldenrod;
}
</style>
</head>
<body>
<div id='container'>
<div id='logo'>
<p>logotext.</p>
</div>
</div>
</body>
</html>

因此,您将边距的最高值调整得越多,#logo 和#container 被拖到页面的下方越远。 #container 应该保持原样,#logo 应该向下移动页面。

最佳答案

这是由边缘崩溃引起的。如果两个元素有接触边距,则边距合并。对此有很好的解释 here .转到名为 Collapsing Margins Between Parent and Child Elements 的部分。

这是三种不同的解决方案。

一种是在容器中添加overflow: auto。这会更改 BCF( block 格式化上下文)。更详细地描述了此技术 here .

#container {
height: 100%;
background-color: black;
/* Add oveflow auto to container */
overflow: auto;
}

http://jsfiddle.net/bzVgV/20/

第二种是在容器上使用填充而不是 Logo 上的边距。这将边际排除在等式之外。

#container {
height: 100%;
background-color: black;
/* Use padding on container instead of margin on logo */
padding-top: 30px;
}

http://jsfiddle.net/bzVgV/18/

最终的解决方案是让边距不再接触。您可以通过向父级添加 1px 的填充来做到这一点。

#container {
height: 100%;
background-color: black;
/* Now margins of container and logo won't touch */
padding-top: 1px;
}

http://jsfiddle.net/bzVgV/21/

关于css - 调整容器 div 内部 div 的边距顶部会将内部 div 和容器 div 从 body 向下推,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8529695/

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