12

緑のボックスの上部とブラウザウィンドウ（ChromeとFirefoxの場合）の間にスペースがあるのはなぜですか？

以下のCSSでは削除できないように見えるhtml要素とbody要素の間に明らかなスペースがあります（そしてその上に数十のバリエーションがあります）。また、パディングのある側面のように、ドキュメント全体の高さにボーナスパディングがあるようです。またはマージンが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をtopに変更した場合：-20px; それは正しく整列し、出来上がり、それはなくなっています。

于 2012-10-29T20:29:14.577 に答える
1

make div position：absoluteあなたは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 の問題です。CSSに追加body > div:first-child > p:first-child { margin-top: 0; }してみてください。修正されます。

于 2012-10-29T20:32:50.217 に答える