web-dev-qa-db-ja.com

ページ上部の空白

ページの上部に約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>
htmlcss3asp.net-mvc-4razor
45
dan_vitch

CssリセットをWebサイトのスタイルシートの上部に追加し、さまざまなブラウザーがデフォルトのマージンとパディングをレンダリングし、おそらく外部スタイルシートが気づかないことを行います。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;
    }
54
Brian Ogden

これを試して

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
4
mdesdev

Cssのリセットとは別に、次のコードをdivコンテナーのcssに追加して修正しました。

position: relative;
top: -22px;
3
David Hernandez

古い質問ですが、私はこれに出くわしました。ファイルが最初にBOMを含むUTF-8である場合がありますが、テンプレートエンジンはそれを好みません。したがって、テンプレートを含めると、ページに別の（見えない）BOMが挿入されます...

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

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

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

3
rocketmonkeys

上記のように空白ができている多くの理由が考えられます。 HTMLの空のdiv要素がある場合、Entitiesもエラーの原因になります。
例

<div class="sample">&nbsp;</div>

HTMLエンティティを削除する

<div class="sample"></div>
1
Praveen M P

上記のいずれも役に立たない場合は、ネストされたDOM要素のいくつか（下のレベル）にmargin-topが設定されているかどうかを確認してください。

デバッガでbody要素自体を検査すると、認識できなくなります。ネストされた複数の要素downを展開したときにのみ表示されますChrome Devのbody elementツールエレメントデバッガーで、margin-topが設定されたエレメントデバッガーがあるかどうかを確認します。

以下は、サイトのスクリーンショットの上部と、bodyタグを調べたときの対応するChrome Dev Toolsビュー]です。

ここには上余白の兆候はなく、上記の回答に従ってブラウザ固有のCSSプロパティをすべてリセットしましたが、不要な空白はまだここにあります。

The unwanted white space above the body elementThe corresponding debugger view

以下は、右のネストされた要素を検査するときのビューです。オレンジ色のtop-marginが設定されているのがはっきりとわかります。これは、body要素の上に空白を引き起こすものです。

Clearly visible top-marginenter image description here

見つかった要素で、margin-topをpadding-topで置き換えます。その上にスペースが必要で、bodyタグの上にリークしないようにします。

それが役立つことを願っています:)

1
bob-12345

Ul、h4などの要素に適用されているWebkitスタイルを確認します。私にとっては、これが発生する前と後のマージンでした。

-webkit-margin-before: 1.33em;
-webkit-margin-after: 1.33em;
0
Beetny

オーバーフロー：自動

overflow: autoタグで<body>を使用することは、よりクリーンなソリューションであり、魅力的です。

0
gilbert-v