web-dev-qa-db-fra.com

Espace blanc en haut de page

J'ai environ 20 pixels d'espace blanc en haut de ma page. J'ai inspecté chaque élément et rien n'a de marge ou de marge dans cette zone. Lorsque j'inspecte l'élément body, il n'inclut PAS cet espace. Lorsque j'inspecte l'élément html, cet espace est inclus. Aussi si je supprime

<!DOCTYPE html>

l'espace blanc s'en va.

Voici ma mise en page principale

<!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

Ajoutez une réinitialisation css en haut de la feuille de style de votre site Web, différents navigateurs affichent des marges et des marges de remplissage par défaut. Les feuilles de style externes peuvent également faire quelque chose que vous ne connaissez pas. Une réinitialisation css initialisera simplement une nouvelle palette, pour ainsi dire:

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;
}

UPDATE: utilisez le sélecteur universel à la place: @Frank a mentionné que vous pouvez utiliser le sélecteur universel: * au lieu de lister tous les éléments, et ce sélecteur ressemble à compatible avec tous les navigateurs principaux :

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
54
Brian Ogden

Essaye ça

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

Mis à part la réinitialisation css, j’ai aussi ajouté ce qui suit au css de mon conteneur div et c’est corrigé.

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

Vieille question, mais je viens de tomber sur cela. Parfois, vos fichiers sont au format UTF-8 avec une nomenclature au début, et votre moteur de template n’aime pas cela. Ainsi, lorsque vous incluez votre modèle, une autre nomenclature (invisible) est insérée dans votre page ...

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

Cela crée un espace au début de votre page, où le navigateur affiche la nomenclature, mais elle vous semble invisible (et dans l'inspecteur, elle apparaît uniquement sous forme d'espaces/de guillemets.

Enregistrez vos fichiers de modèle au format UTF-8 sans nomenclature, ou modifiez votre moteur de modèle pour gérer correctement les documents UTF8/BOM.

3
rocketmonkeys

Il peut y avoir plusieurs raisons pour lesquelles vous obtenez des espaces, comme mentionné ci-dessus. Supposons que si vous avez un élément div vide avec HTML Entities également provoquer l'erreur.
Exemple

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

Supprimer les entités HTML

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

Si rien de ce qui précède n’aide, vérifiez s’il y a margin-top défini sur certains éléments DOM imbriqués (certains niveaux inférieurs).

Il ne sera pas reconnaissable lorsque vous inspecterez l'élément body lui-même dans le débogueur. Il ne sera visible que lorsque vous déplierez plusieurs éléments imbriqués vers le bas dans body élément dans Chrome Dev Débogueur d’outils et vérifiez s’il y en a un avec margin-top ensemble.

La partie ci-dessous correspond à la partie supérieure d’une capture d’écran du site et à la vue correspondante Chrome Outils de développement lorsque vous inspectez la balise body.

Aucun signe de marge supérieure ici et vous avez réinitialisé toutes les propriétés CSS spécifiques à votre navigateur, comme indiqué dans les réponses ci-dessus, mais cet espace blanc non désiré est toujours là.

The unwanted white space above the body elementThe corresponding debugger view

Voici une vue lorsque vous inspectez l'élément imbriqué de droite. On voit clairement le orange'ish top-margin est réglé dessus. C’est celui qui crée l’espace blanc au-dessus de l’élément body.

Clearly visible top-marginenter image description here

Sur cet élément trouvé, remplacez margin-top avec padding-top si vous avez besoin d’espace au-dessus et que vous ne perdez pas l’espace au-dessus de la balise body.

J'espère que ça t'as aidé :)

1
bob-12345

Vérifiez si des styles de kit Web sont appliqués à des éléments tels que ul, h4, etc. Pour moi, c'était une marge avant et après.

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

débordement: auto

En utilisant overflow: auto sur le <body>tag est une solution plus propre et fera l'affaire.

0
gilbert-v