web-dev-qa-db-fra.com

CSS: Comment puis-je me débarrasser de la fenêtre par défaut "padding"? Un élément défini à 100% de la largeur n'atteint pas les limites de la fenêtre

J'ai donc un élément qui est placé directement dans le corps:

<body>
    <div id="header">Some stuff...</div>
    Other stuff...
</body>

Ce qui suit est le CSS utilisé:

body{
    text-align:center;
}
#header{
    margin:auto;
}

Ainsi, la variable #header est définie sur 100% width (valeur par défaut) et est centrée. Le problème, c'est qu'il y a un "espace" entre la bordure de la fenêtre et l'élément #header ...

|  |----header----|   |
^window border        ^window border

J'ai essayé de l'ajuster avec javascript, et il redimensionne avec succès l'élément à la largeur exacte de la fenêtre, mais cela n'élimine pas "l'espace":

$('#header').width($(window).width());

Une solution semble être d'ajouter les règles CSS suivantes (et de conserver le javascript ci-dessus):

#header{
    margin:auto;
    position:relative;
    top:-8px;
    left:-8px;
}

Dans mon navigateur, cet espace est de 8 pixels, mais je ne suis pas sûr que ce soit la même chose pour tous les navigateurs. J'utilise Firefox sur Ubuntu ...

Alors quel est le bon moyen de se débarrasser de cet espace - et si c'est ce que j'ai utilisé ci-dessus, tous les navigateurs agissent-ils de la même manière?

htmlcsspositionwidthpadding
25
Alex

body a des marges par défaut sur tous les navigateurs, il vous suffit donc de les réduire:

body {
    margin: 0;
    text-align: center;
}

Vous pouvez ensuite supprimer les marges négatives de #header.

48
BoltClock

Un moyen facile de résoudre ce problème consiste à supprimer toutes les marges. Et vous pouvez le faire avec le code suivant:

* {
    margin:0;
}

Cela résoudra le problème et vous donnera un contrôle plus précis des marges de tous les éléments. 

10
Bups

Ajoutez-les à la balise style dans body, comme la suivante:

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

Cela a fonctionné pour moi. Bonne chance!!

2
Tharindulucky

J'ai trouvé ce problème persistant même en réglant la marge du corps à zéro. 

Cependant, il s'avère qu'il existe une solution facile. Tout ce que vous avez à faire est de donner à votre balise HEADER une bordure de 1px, ainsi que de régler la marge du corps à zéro, comme indiqué ci-dessous.

body { margin:0px; }

header { border:1px black solid; }

Vous ne savez pas pourquoi cela fonctionne, mais j'utilise le navigateur Chrome. Évidemment, vous pouvez également changer la couleur de la bordure pour qu'elle corresponde à la couleur de votre en-tête.

0
wardheed