Espace blanc en haut de la 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 rembourrage ou de marge dans ce domaine. Lorsque j'inspecte l'élément de corps, il n'inclut pas cet espace. Lorsque j'inspecte l'élément html, il inclut cet espace. Aussi si je supprime
<!DOCTYPE html>
L'espace blanc disparaît.
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>
7 réponses
Ajoutez une réinitialisation css en haut de la feuille de style de votre site web, différents navigateurs rendent une marge et un remplissage par défaut et peut-être des feuilles de style externes font quelque chose que vous n'êtes pas au courant, une réinitialisation css initialisera 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;
}
Mise à jour: 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 semble être compatible avec les navigateurs croisés tous les principaux navigateurs:
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
Essayez ceci
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
Mis à part la réinitialisation css, j'ai également ajouté ce qui suit au CSS de mon conteneur div et cela l'a corrigé.
position: relative;
top: -22px;
Vieille question, mais je viens de tomber sur ceci. Parfois, vos fichiers sont UTF-8 avec une nomenclature au début, et votre moteur de modèle n'aime pas ça. Ainsi, lorsque vous incluez votre modèle, vous obtenez une autre nomenclature (invisible) insérée dans votre page...
<body>{INVISIBLE BOM HERE}...</body>
Cela provoque un écart au début de votre page, où le navigateur rend la nomenclature, mais il vous semble invisible (et dans l'inspecteur, apparaît simplement sous forme d'espaces/guillemets.
Enregistrez vos fichiers de modèle en UTF-8 sans nomenclature, ou modifiez votre moteur de modèle pour gérer correctement les documents UTF8/BOM.
Il pourrait y avoir plusieurs raisons pour lesquelles vous obtenez un espace blanc comme mentionné ci-dessus.
Supposons que si vous avez un élément div vide avec HTML Entities provoque également l'erreur.
Exemple
<div class="sample"> </div>
Supprimer les entités HTML
<div class="sample"></div>
Vérifiez les styles webkit appliqués à des éléments tels que ul, H4, etc. Pour moi, c'était la marge-avant et après avoir causé cela.
-webkit-margin-before: 1.33em;
-webkit-margin-after: 1.33em;
Je viens de mettre CSS dans mon <div> travaillant maintenant dans le code
position: relative; top: -22px;