12

为什么绿色框的顶部和浏览器窗口（在 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>
4

8 回答 8

15

因为您的<p>Platform</p>元素有一个从其父元素伸出的边距<div id="airport">并将其从<body>.

于 2012-10-29T20:27:56.803 回答
3

因为p标签里面#airport有上边距。

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

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

看到这个 jsFiddle

于 2012-10-29T20:31:16.143 回答
2

正在发生偏移。如果您将#airport 更改为顶部：-20px；它会正确排列，瞧，它不见了。

于 2012-10-29T20:29:14.577 回答
1

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

于 2012-10-29T20:29:26.563 回答
1

我改变你的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/

于 2012-10-29T20:30:19.843 回答
1

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

于 2012-10-29T20:32:50.217 回答
0

正文中有默认边距

将此添加到CSS：

body{
    margin:0;
}
于 2018-10-16T16:32:06.040 回答
0

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

    div#airport {
    ...
    padding: 1px;
}
于 2021-03-07T16:36:52.877 回答