64

ページの上部に約 20 ピクセルの余白があります。すべての要素を調べましたが、この領域にはパディングやマージンがありません。body 要素を検査すると、このスペースは含まれません。html要素を調べると、このスペースが含まれています。また、削除すると

<!DOCTYPE html>

空白が消えます。

これが私のメインレイアウトです

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @RenderSection("Css", false)
</head>

<body>
    @RenderSection("JavaScript", false)
</body>
</html>
4

10 に答える 10

88

Web サイトのスタイル シートの上部に css リセットを追加します。さまざまなブラウザーがデフォルトのマージンとパディングをレンダリングし、おそらく外部スタイル シートはあなたが気付いていないことを行います。css リセットは、いわば新しいパレットを初期化するだけです。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

更新: 代わりにユニバーサル セレクターを使用し てください: @Frank は、すべての要素を一覧表示する代わりに、ユニバーサル セレクターを使用できると述べました。このセレクターは、すべての主要なブラウザーでクロスブラウザー互換性*があるように見えます:

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
于 2013-09-12T19:06:06.727 に答える
6

古い質問ですが、これに遭遇しました。ファイルが最初に BOM を持つ UTF-8 である場合があり、テンプレート エンジンはそれを好まないことがあります。したがって、テンプレートを含めると、別の (見えない) BOM がページに挿入されます...

<body>{INVISIBLE BOM HERE}...</body>

これにより、ブラウザーが BOM をレンダリングするページの先頭にギャップが生じますが、それは見えないように見えます (インスペクターでは、空白/引用符としてのみ表示されます)。

テンプレート ファイルを BOM なしの UTF-8 として保存するか、テンプレート エンジンを変更して UTF8/BOM ドキュメントを正しく処理します。

于 2015-03-10T14:57:45.700 に答える
4

これを試して

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
于 2013-09-12T19:06:50.307 に答える
-3

<div>現在コードで作業しているCSSを入れただけです

position: relative; top: -22px;
于 2018-03-07T17:10:58.440 に答える