web-dev-qa-db-fra.com

Marge CSS: ne met pas à

Je suis un nouveau venu dans la conception web. J'ai créé ma mise en page Web en utilisant CSS et HTML comme ci-dessous. Le problème est que même si je règle la marge à 0, la marge supérieure n’est pas fixée à 0 et laisse de l’espace. Comment puis-je effacer cet espace blanc?

Capture d'écran du problème

There's a space in top

Feuille de style 

<style type="text/css">
body{   
    margin:0 auto; 
    background:#F0F0F0;}

#header{
    background-color:#009ACD; 
    height:120px;}

#header_content { 
    width:70%; 
    background-color:#00B2EE;
    height:120px; 
    margin:0 auto;
    text-align:center;}

#content{   
        width:68%; 
        background-color:#EBEBEB;
        margin:0 auto; 
        padding:20px;}
</style>

HTML

<body>
    <div id="header">
     <div id="header_content">
           <p>header_content</p>
       </div>
    </div>
<div id="content">
Main Content
</div>
</body>

Voici le fichier entier 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Book Shop</title>
<style type="text/css">
html, body, #header {
    margin: 0 !important;
    padding: 0 !important;
}
body{   
    margin:0;    padding: 0;
    background:#F0F0F0;}

#header{
    background-color:#009ACD; 
    height:120px;}

#header_content { 
    width:70%; 
    background-color:#00B2EE;
    height:120px; 
    margin:0 auto;
    text-align:center;}

#content{   
        width:68%; 
        background-color:#EBEBEB;
        margin:0 auto; 
        padding:20px;}

body {
   margin: 0;
   padding: 0;
}
</style>
</head>

<body>
  <div id="header">
     <div id="header_content">
           <p>header_content</p>
       </div>
    </div>
<div id="content">
Main Content
</div>

</body>
</html>
htmlcssmargin
19
Nipuna

Essayer...

body {
   margin: 0;
   padding: 0;
}

jsFiddle .

À cause des navigateurs utilisant différentes feuilles de style par défaut, certaines personnes recommandent une feuille de style reset telle que Réinitialiser Reloaded Eric Meyer.

31
alex

Vous devez définir la page réelle sur marge: 0 et padding: 0 sur le code HTML réel, pas seulement le corps.

utilisez ceci dans votre feuille de style css.

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

cela mettra la page entière à 0, pour un nouveau départ, sans marge ni rembourrage.

20
Dan G

vous devriez avoir soit (ou les deux):

  1. un paddding! = 0 sur le corps
  2. une marge! = 0 sur # en-tête 

essayer 

html, #header {
    margin: 0 !important;
    padding: 0 !important;
}

margin est le "espace" extérieur la boîte, le padding est le "espace" intérieur la boîte (entre la bordure et le contenu) . Le !important empêche la redéfinition de propriété par ces dernières règles . 

4
Yannick Loiseau

Essayer

html, body{
  margin:0 !important;
  padding:0 !important;
}
3
Hussein
h1 {
margin-top:0;
padding-top: 0;}

C'est juste un malentendu avec la balise h1. Vous devez définir h1 tag margin-top et padding-top à 0 (zéro).

3
alter

Il semble que personne n’a réellement lu votre question et examiné votre code source. Voici la réponse que vous attendiez tous:

#header_content p {
    margin-top: 0;
}

jsFiddle

0
Zectbumo

Après avoir lu ceci et résolu les mêmes problèmes, je conviens que cela concerne les en-têtes (h1 bien sûr, n’a pas été joué avec d’autres), ainsi que les styles de navigateur qui ajoutent des marges et des marges avec des règles intelligentes difficiles à trouver et à ignorer.

J'ai adapté une technique permettant d'appliquer correctement la propriété box-sizing aux marges et aux rembourrages. l'article original pour la taille de la boîte se trouve dans CSS-Tricks :

html {
margin: 0;
padding: 0;
}
*, *:before, *:after {
margin: inherit;
padding: inherit;
}

Jusqu’à présent, c’est exactement le truc pour ne pas utiliser de réinitialisations complexes et me permet de toute façon beaucoup plus facilement d’appliquer une conception. J'espère que ça aide.

0
user7362925

ajoutez ce code au début du CSS principal. 

*,html,body{
  margin:0 !important;
  padding:0 !important;
  box-sizing: border-box !important;;
}
0
HarshSigma