web-dev-qa-db-fra.com

Comment supprimer de la marge autour du corps ou effacer les styles CSS par défaut

Je suis certes débutant, mais j’ai aussi fait pas mal de recherches avant de poster ceci. Il semble y avoir un espace supplémentaire autour de mon élément div. Je tiens également à souligner que j'ai essayé plusieurs combinaisons de bordures: 0, padding: 0, etc. et que rien ne semblait se débarrasser de l'espace blanc.

Voici le code:

<html>
<head>
    <style type="text/css">
        #header_div  {
            background: #0A62AA;
            height: 64px;
            min-width: 500px;
        } 
        #vipcentral_logo { float:left;  margin: 0 0 0 0; }
        #intel_logo      { float:right; margin: 0 0 0 0; }
    </style>
</head>
<body>
    <div id="header_div">
        <img src="header_logo.png" id="vipcentral_logo">
        <img src="intel_logo.png" id="intel_logo"/>
    </div>
</body>

Voici à quoi ça ressemble (j'ai inséré des flèches rouges pour appeler explicitement l'espace supplémentaire):

Extra space around a div element

Je m'attendais à ce que la couleur bleue touche directement les bords du navigateur et la barre d'outils. Les images mesurent exactement 64 pixels et ont la même couleur d'arrière-plan que celle attribuée à #header_div. Toute information serait grandement appréciée.

htmlcssmargincss-reset
25
Anthony

body a des marges par défaut: http://www.w3.org/TR/CSS2/sample.html 

body { margin:0; } /* Remove body margins */

Ou vous pouvez utiliser cet utile {réinitialisation globale} _ 

* { margin:0; padding:0; box-sizing:border-box; }

Si vous voulez quelque chose de moins *global que:

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

un autre réinitialisation CSS:

http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css
http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/
…

38
Roko C. Buljan

essayez de supprimer le remplissage/les marges de la balise body.

body{
padding:0px;
margin:0px;
}
8
Kevin Bowersox

essayez d’ajouter ce qui suit dans votre CSS:

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

C'est la marge/remplissage par défaut de l'élément body.

Certains navigateurs ont une marge par défaut, d'autres un remplissage par défaut et les deux sont appliqués en tant que remplissage dans l'élément body.

Ajoutez ceci à votre CSS:

body { margin: 0; padding: 0; }
3
Guffa

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; }

Si vous avez des balises H1, H2 dans votre HEADER, vous devrez également définir la marge (MARGIN) de ces balises sur zéro, ce qui éliminera tout espace supplémentaire pouvant apparaître.

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.

2
wardheed

Aller avec ça

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

J'ai eu le même problème et mon premier élément <p> qui se trouvait en haut de la page et qui comportait également une marge par défaut du navigateur Webkit. Cela a entraîné toute ma division vers le bas, ce qui a eu le même effet que vous avez mentionné, alors faites attention aux éléments textuels qui se trouvent tout en haut de la page.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body style="margin:0;">
      <div id="image" style="background: url(pixabay-cleaning-kids-720.jpg) 
no-repeat; width: 100%; background-size: 100%;height:100vh">
<p>Text in Paragraph</p>
      </div>
    </div>
  </body>
</html>

Pensez donc à vérifier tous les éléments enfants, pas seulement les balises HTML et body.

0
Daniel