Question

为什么绿框顶部和浏览器窗口之间有空格（在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>

Answer 1

因为您的<p>Platform</p>元素有一个余量，可以从其父<div id="airport">元素中取出，并将其从<body>偏移。

Answer 2

因为p中的#airport标记有最高边距。

如果删除p标记上的浏览器默认上边距，您将无法获得该空间。例如：

<div id="airport">
    <p style="margin:0;">Platform</p>
</div>

See this jsFiddle

Answer 3

正在发生偏移。如果将#airport更改为顶部：-20px;它排列正确，瞧瞧，它已经消失了。

Answer 4

使div位置：绝对你可以使用margin-left再次居中： - （div.width px的一半）

Answer 5

我改变你的CSS：

body {
                margin: 0px;
                padding: 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;
            }

在此处查看您的代码http://jsfiddle.net/xfhyq/

Answer 6

因为P标记是文档中第一个带有文本的标记，所以这是一个常见的CSS问题。尝试将body > div:first-child > p:first-child { margin-top: 0; }添加到您的CSS中，它会修复它。

Answer 7

主体中有默认边距

将此添加到CSS：

body{
    margin:0;
}

Answer 8

在父 div 上设置一些填充也可以解决它。

    div#airport {
    ...
    padding: 1px;
}

为什么元素和元素之间有空格

8 个答案: