web-dev-qa-db-fra.com

HTML: espace autour des éléments, comment les supprimer?

Ma page Web contient plusieurs divs. Certains sont réglés sur width: 100%, de sorte qu'ils remplissent toute la largeur de la page. Mais en haut de la page, il y a un petit espace blanc avant que le premier élément n'apparaisse. De plus, ce même espace est visible à gauche et à droite des éléments couvrant toute la largeur de la page.

Je n'arrive pas à comprendre pourquoi. Si je mets:

html, body {
width: 100%;
}

alors les espaces restent, mais la page est simplement étendue pour correspondre à la largeur de l'image d'un div.

Quelqu'un peut-il aider? C'est probablement assez simple mais je dois négliger quelque chose. Je vous remercie.

EDIT: Je dois mentionner que j'utilise un élément de parallaxe. Ceci utilise un remplissage, de sorte que l'image remplisse toute la partie et ne laisse pas de zone noire au dessus. Le HTML est:

<div class="js-background-1 container">
</div>

Le CSS:

.container { 
    padding-top: 200px;
}

.js-background-1 { 
    background: transparent url(url/to/image) center 0 no-repeat;
}

Et le javascript:

<script type="text/javascript">
var $window = $(window); 
var velocity = 0.4;
function update(){ 
    var pos = $window.scrollTop(); 

    $('.container').each(function() { 
        var $element = $(this); 
        var height = $element.height(); 

        $(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px');
    });
}; 

$window.bind('scroll', update);

</script>

J'ai utilisé le tutoriel de http://www.webdesign.org/how-to-create-a-parallax-scrolling-website.22336.html , il y a donc d'où il vient. J'ai un peu modifié le code HTML de mon site Web, mais le reste est identique.

J'ai vu le commentaire sur la marge et le remplissage réglés sur 0, mais cela conduit à ma div pour avoir un espace vide si vous ne faites pas défiler suffisamment.

imagehtmlwidthwhitespace
9
B_s

Vous devez supprimer la marge sur body:

body {
    padding:0;
    margin:0;
}

Vous pouvez également supprimer le remplissage et la marge sur html et body

html, body {
    padding:0;
    margin:0;
}

Voir sur jsfiddle

Mais je ne conseillerais pas d'utiliser * (le sélecteur universel)

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

Cela supprimerait le remplissage et les marges sur les éléments tous.

8
Sébastien

La bonne méthode consiste à toujours utiliser au début du fichier (j'ai oublié de le remplir):

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

Ces deux lignes au début du fichier CSS principal résolvent de nombreux problèmes que vous pouvez rencontrer. J'espère que ça vous aidera.

0
Jakub Mendyk