[ RÉSOLU ] Décalage mystique ??

Bonjour.
Je me demande pourquoi il y a un décalage à gauche et à droite de quelques px avec le bord alors qu'il n'y en a pas pour le header.
http://i.imgur.com/yxevPgz.gif

HTML

<header>
  menu
</header>
<div class="bandeau">
</div>
<article>
  
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.

CSS

header {
  width: 100%;
	color : white;
	background-color: black;
	position:fixed;
  height: 3em;
  top:0;
  left:0;
  z-index:1;
  text-align: center;
}
.bandeau{
  background-color: yellow;
  height: 3em;
  top:3em;
  width:100%;
  position:relative;
}

article{
  top:3.5em;
  position: relative;
}

Je débute, j'ai peut-être raté une évidence.
Modifié par hkza (26 Feb 2016 - 11:19)

Bonjour,

Difficile à dire car nous n'avons pas accès à tout le code, il manque visiblement des balises. On peut voir le CodePen ?

À première vue le Lorem Ipsum n'est intégré dans aucun paragraphe (balise <p>). il faudrait déjà commencer par là...

Je pense qu'il te reste un margin ou un padding sur le body.

Le header ne les subit pas car en position: fixed, il se réfère à l'élément html et pas au body.

Oui ça sera plus facile avec le codepen

Donc la div "bandeau" et la balise article se réfèrent au body. Mais je n'ai encore aucun padding ni margin ( enfin je crois ).

J'ai rajouté la balise p . mais j'ai toujours ce léger décalage.
Modifié par hkza (26 Feb 2016 - 09:21)

Hello,

Voici l'exemple en réinitialisant les margin/padding à 0.

C'est une manière courante de faire sur le sélecteur *.
L'autre manière est d'avoir une feuille de reset css.

Bon amusement pour la suite

Bonjour,

hkza a écrit :
Donc la div "bandeau" et la balise article se réfèrent au body. Mais je n'ai encore aucun padding ni margin ( enfin je crois ).

Tu n'as aucune marge ou marge interne, cela ne veut pas dire que tu as 0 pour ces valeurs, cela veut dire que les valeurs par défaut s'appliquent

Je t'invite à lire cet article sur le sujet

Sur la page de test, par exemple avec Chrome, la balise body a une marge de 8px

Ahh merci les amis !

C'est bien les marges par défaut inhérentes aux différents navigateurs testés ( pour ma part chrome et firefox ) avec des marges de 8px ! et du coup mon header en fixed s'en tape mais pas le reste.

Probleme résolu avec un reset CSS ! CQFD !

Modifié par hkza (26 Feb 2016 - 11:19)