L'espace blanc en haut de la page

J'ai environ 20 pixels de l'espace blanc en haut de ma page. J'ai inspecté chaque élément, et rien n'a de rembourrage ou de la marge dans ce domaine. Quand j'ai inspecter l'élément de corps, il ne comprend PAS cet espace. Quand j'ai inspecter l'élément html est de n'inclure cet espace. Aussi, si je supprime

<!DOCTYPE html>

l'espace blanc s'en va.

Voici ma 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>

Veuillez envoyer la sortie html (Afficher la source de la page(Chrome))
Tout particulier navigateur?
Chrome est le navigateur que j'utilise. J'ai perdu le code html ici. Désolé pour la mauvaise mise en forme docs.google.com/document/d/...
Question est également à 10 IE et FF

InformationsquelleAutor dan_vitch | 2013-09-12

52

Ajouter un css reset en haut de votre site web de la feuille de style, les différents navigateurs rendu par défaut, certaines de marge et de rembourrage et peut-être des feuilles de style externes faites quelque chose, vous ne sont pas conscients de trop, un css reset va initialiser 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 de 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 dirait qu'il est croix-navigateur compatible dans tous les principaux navigateurs:
```
* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
```
- cela rend l'espace blanc en aller
- En d'autres termes, vous obtenez le résultat souhaité droit?
- Vous pouvez obtenir le même effet en utilisant * pour sélectionner tous les éléments. Comme * { css } de Cette façon, vous n'aurez pas à la liste de chaque élément.
- merci j'ai mis à jour ma réponse avec votre recommandation, bon!
- Pour être honnête, ce n'est pas une bonne idée d'utiliser * que le sélecteur. Votre demande le navigateur pour ajouter des styles à des choses qui n'en ont pas besoin, comme les <script> tag, ou ajouter des styles à des éléments en ligne qui n'ont pas de quoi que ce soit réglé en premier lieu. Cela ne sert qu'à obtenir le navigateur pour faire plus de travail pour afficher la page. C'est peut-être petit, il va rendre les choses plus lentement, en général, comme il est plus pour le navigateur à penser.
- Eh bien au moins sélecteur de ces deux choix sont là, j'espère que les gens de lire les commentaires, il int réponse avant d'y faire la décision finale.
- cela ne fonctionne pas dans mon cas...
- que vous avez un problème avec la commande de vos feuilles de styles, essayez de mettre ce dernier
- ses enlevé le blanc space dans mon cas. Mais les boutons sont manquants maintenant, qui travaillait avant
- vous êtes juste un débutant en CSS? Un CSS reset casser votre CSS pour vos boutons démontre que vous ne connaissez surement pas ce que votre CSS pour vos boutons est en train de faire pleinement
- Merci pour la réponse. Le CSS reset est de plus en plus de l'équitation avec mon bouton CSS. Fixe maintenant
- Si cette solution ne fonctionne pas il y a peut être un autre coupable. Regarde ma réponse ci-dessous stackoverflow.com/a/55471272/6597265
InformationsquelleAutor Brian Ogden
4

Essayer cette
```
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
```
- height:100% provoque une barre de défilement pour moi sur Chrome.
- ajoutez simplement box-sizing propriété avec border-box valeur, par exemple box-sizing: border-box;
InformationsquelleAutor mdesdev
4

En dehors de la css reset, j'ai aussi ajouté ce qui suit à la css de mon div conteneur et qu'il fixe.
```
position: relative;
top: -22px; 
```
InformationsquelleAutor David Hernandez
3

Vieille question, mais je viens de tomber sur cette. Parfois, vos fichiers sont en UTF-8 avec BOM au début, et votre moteur de template n'aime pas cela. Ainsi, lorsque vous incluez votre modèle, vous obtenez un autre (invisible) de la NOMENCLATURE inséré 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 semble invisible à vous (et à l'inspecteur, tout montre que les espaces ou les devis.

Enregistrer votre modèle fichiers en UTF-8 sans BOM, ou de changer votre moteur de template pour gérer correctement l'UTF8/NOMENCLATURE des documents.

InformationsquelleAutor
1

Il pourrait y avoir de nombreuses raisons que vous obtenez un espace blanc comme mentionné ci-dessus.
Supposons que si vous avez vides élément div avec HTML Entités également la cause de l'erreur.

Exemple
```
<div class="sample">&nbsp;</div>
```
Supprimer des Entités HTML
```
<div class="sample"></div>
```
InformationsquelleAutor Praveen M P
0

Vérifier tout webkit styles appliqués à des éléments comme ul, h4, etc. Pour moi, c'était de la marge avant et après l'origine de ce problème.
```
-webkit-margin-before: 1.33em;
-webkit-margin-after: 1.33em;
```
InformationsquelleAutor Beetny
0

Si rien de ce qui précède permet, vérifier si il y a margin-top ensemble sur certaines (certains niveaux ci-dessous) imbriquée élément du DOM(s).

Il sera pas reconnaissable lorsque vous inspectez body élément lui-même dans le débogueur. Il ne sera visible que lorsque vous dépliez plusieurs éléments imbriqués bas dans body élément Chrome Dev Tools éléments débogueur et vérifier si il y en a une avec margin-top ensemble.

Ci-dessous est la partie supérieure d'un site de capture d'écran et le Chrome Dev Tools vue lorsque vous inspectez body tag.

Aucun signe de la marge du haut ici et vous avez réinitialisé tous les navigateur scpecific propriétés CSS que par les réponses ci-dessus mais que les blancs de l'espace est toujours là.

Ce qui suit est une vue lorsque vous inspectez le droit élément imbriqué. On voit clairement l'orange new'ish top-margin est réglé sur on. C'est celui qui provoque l'espace blanc sur le dessus de body élément.

Sur cet élément trouvé remplacer margin-top avec padding-top si vous avez besoin d'espace au-dessus d'elle et pourtant pas de fuite au-dessus de la body tag.

Espère que cela aide 🙂

InformationsquelleAutor bob-12345
0

overflow: auto

À l'aide de overflow: auto sur le <body> tag est une solution plus propre et fonctionne à merveille.

InformationsquelleAutor gilbert-v
-1

Je Viens de mettre le CSS dans mon <div> travaille maintenant dans le code
```
position: relative; top: -22px;
```
InformationsquelleAutor Siddharth Shukla

Vous devez vous connecter pour publier un commentaire.

overflow: auto