Espace dans le haut de la page malgré margin:0 et padding: 0

Il y a un 32px écart en haut de mon site, en dépit de la définition des marges externes et internes à 0. Je sais que c'est 32px parce que je peux le fixer avec un rembourrage: -32px. Mais ensuite, j'ai un trou au fond! Dans Firebug, il semble que le corps ne démarre 32px vers le bas depuis le début de l'élément HTML, même si j'ai mis les marges externes et internes à 0.

Voici mon CSS:

html {
  height: 100%;
  padding: 0;
  margin: 0;
}

body { 
  background-color: #a7a9ac; 
  color #666666;
  background-image: url('body-bg.gif');
  background-repeat: repeat-x;
  height: 100%;
  padding: 0;
  margin: 0;
}

body, p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:   13px;
  line-height: 18px;
}

.container_banner h1{
  font-size: 48px;
  position: relative;
  top: 130px;
  left: 250px;
  width: 400px;
}

.container_banner h3{
  position: relative;
  top: 0px;
  left: 32px;
  font-size: 10px;
  color: #F8F8F8;
}

.container_banner{
  position: relative;
  top: 0px;
  background-image: url('banner.png');
  background-repeat: no-repeat;
  margin: 0 auto;
  width: 945px;
  height: 188px;
  padding: 0px;
  background-color: #ffffff;
}

.container{
  position: relative;
  top: 0px;
  margin: 0 auto;
  min-height: 100%;
  width: 945px;
  padding: 0px;
  padding-top: 20px;
  margin-bottom: 0px;
  background-color: #ffffff;
  background-image: url('thin-background.png');
}

.content{
  margin-top: 0px;
  margin-left: 30px;
  min-height: 100%;
}

Conteneur bannière est le premier div, suivie par conteneur (qui inclut tout le contenu).

Merci de ne pas écrire les balises dans les titres des questions.
Que voulez-vous dire, les balises? Le leader de la CSS:? C'était pour signaler le sujet.
Correct. Le sujet est marqué par la question des balises qui existent afin de garantir la cohérence et indexables mécanisme de ce que nous avons l'habitude de faire sur les conseils de message (qui est, de l'écriture des balises dans les titres).
J'ai essayé de mettre votre style en un simple html doc avec les 2 divs vous l'avez mentionné, mais n'importe quel texte que j'ai placé dans .container_banner commencé en haut de mon navigateur (pas d'écart). Pouvez-vous poster le code html qui affiche ce problème? Aussi: est-il se produire dans tous les navigateurs, ou seulement à celles qui sont spécifiques?
Chrome et Firefox. Je vais essayer de faire un de ces violons.

OriginalL'auteur MrB | 2011-05-06

  1. 17

    Je pense que cela est causé par l'utilisation de position: relative et votre élément h1 hérite d'une marge par défaut. Lorsque vous utilisez position: relative, la marge ne semble pas être déplacé avec le contenu réel et, par conséquent, est appliquée sur le haut de la page.

    J'ai changé le CSS adéquat pour résoudre ce problème:

    .container_banner h1{
  font-size: 48px;
  position: relative;
  top: 130px;
  left: 250px;
  width: 400px;
  margin-top: 0;
}

    Vous devrez peut-être faire de même pour tous les autres éléments qui sont en position: relative et de la marge (par exemple, les balises h3)

    Il serait préférable de couper vers le bas sur l'utilisation de la position relative qu'il est assez difficile de prévoir de tels comportements.

    Génial! Ce n'.
    Cela a fonctionné pour moi. Dégradé d'arrière-plan sur un élément wrapper a pris le départ le point de le premier élément et non par le haut de la page comme prévu. Ensemble margin-top à 0 et utilisé padding-top à la place.

    OriginalL'auteur James

  2. 4

    WordPress ajoute automatiquement dans un admin barre à l'aide de wphead(); Vous et j'ai sans doute quelque sorte supprimé la barre d'administrateur de choses donc il semble vide, mais si nous avons eu de la gauche de la barre d'administration de détails, il était là.

    Ajouter à votre functions.php pour se débarrasser d'elle:

    function my_function_admin_bar(){ 
  return false; 
}
add_filter( 'show_admin_bar' , 'my_function_admin_bar');
    C'est le chemin à parcourir! Il supprime le panneau d'admin sur le haut et aussi le fossé qu'il produit. merci!

    OriginalL'auteur Pyjammez

  3. 1

    Je ne suis pas tout à fait sûr de ce que tu veux dire, mais j'imagine que votre problème va être de quelques HTML non valide (assurez-vous d'utiliser un doctype correct), ou le padding-top: 20px; règle dans votre container classe.

    C'est pour supprimer un écart entre les conteneurs et de conteneurs. Si je le supprime, le haut écart est toujours là.

    OriginalL'auteur Graham Clark

  4. 1

    Mon problème ÉTAIT le suivant : un H2 balise html, qui était le premier enfant de la balise d'un DIV, a provoqué un écart sur le dessus de la div.

    Un tel écart je m'attends à l'aide de la css de la marge (en-haut). La DIV a pas (hérité) "marge (en-haut)" propriété CSS.

    Retrait de la H2 de l'enfant enlevé à l'inattendu, de l'écart, mais n'est pas une bonne solution.

    Ce que vraiment permet de résoudre le problème est de définir une propriété CSS "display" pour la DIV 'inline-block'. Vous pouvez utiliser le H2 (ou Hx) sans les indésirables de l'écart à la suite alors.

    <div style="display:inline-block">
  <h2>blabla</h2>
</div>

    J'espère que c'est la réponse qui résout votre problème!

    OriginalL'auteur Vincent

  5. 0

    Ou, vous avez une erreur dans votre CSS, color #666666. Il n'y a pas : entre. Peut-être qui est à l'origine de la CSS à être analysé dans le mauvais sens.

    Thx, mais qui n'ont pas le fixer.

    OriginalL'auteur Starx

  6. 0

    si cette div est insine corps (par exemple, ou tout othere div) définir la marge et le remplissage de 0px; et il devrait marche pas bien

    <body>
<div class="div_with_gap">
</div>
</body>

    et il devrait résoudre le problème

    body{
margin: 0px;
padding: 0px;}

    OriginalL'auteur user8765020

  7. -1

    J'ai eu exactement le même problème.

    La façon dont je l'ai résolu (pour l'instant du moins) est à l'aide de:

    * {
    margin-top: 0;
}

    en haut de ma feuille de style.

    Ceci définit la marge supérieure de CHAQUE élément à zéro, donc à utiliser avec la compréhension de ce, et que la définition de la 'margin-top' de la propriété, encore et encore peut être nécessaire.

    Sam

    OriginalL'auteur Sam