我觉得这一定是我做傻事的问题,但我无法弄明白.这是一个显示我的问题的演示页面.页面的来源:
<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应该向下移动页面.
mrt*_*man 33
这是由于利润率下降造成的.如果两个元素具有触摸边距,则边距合并.还有就是一个很好的解释在这里.转到名为的部分Collapsing Margins Between Parent and Child Elements.
这是三种不同的解决方案.
一种是添加overflow: auto到容器中.这改变了BCF(块格式化上下文).这里更详细地描述了该技术.
#container {
height: 100%;
background-color: black;
/* Add oveflow auto to container */
overflow: auto;
}
第二种是在容器上使用填充而不是徽标上的边距.这使得边距超出了等式.
#container {
height: 100%;
background-color: black;
/* Use padding on container instead of margin on logo */
padding-top: 30px;
}
最终的解决方案是使边距不再触及.您可以通过向父级添加1px填充来完成此操作.
#container {
height: 100%;
background-color: black;
/* Now margins of container and logo won't touch */
padding-top: 1px;
}
| 归档时间： |
|
| 查看次数： |
14407 次 |
| 最近记录： |