为什么绿色框顶部和浏览器窗口之间有空格(在Chrome和Firefox中)？
html和body元素之间有一个明显的空间,我似乎无法通过下面的CSS消除它(以及它上面的几十个变体.)在整个文档高度上似乎也有一些奖励填充,就像填充的某些方面一样或保证金未重置为0.
有用的提示:http://reference.sitepoint.com/css/collapsingmargins
我使用以下代码解决了这个问题:
div#aiport > *:first-child { margin-top: 0px }
同时添加
overflow: hidden;
对div#airport自身的定义解决了这个问题正确.:-)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bug</title>
<link rel="icon" type="image/png" href="bookmarkIcon.png" />
<style type="text/css">
html {
height: 100%;
min-height: 100%;
padding: 0px;
margin: 0px;
}
body {
margin: 0px;
padding: 0px;
margin-top: 0px;
padding-top: 0px;
width: 100%;
height: 100%;
font-size: 16px;
background: #fff;
}
div#airport {
position: relative;
z-index: 1;
top: 0px;
padding: 0px;
padding-top: 0px;
margin: 0px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
width: 900px;
min-width: 900px;
max-width: 900px;
background-color: #0f0;
}
</style>
</head>
<body lang="en">
<div id="airport">
<p>Platform</p>
</div>
</body>
</html>