problème de marge css

Question

Mon css ressemble à ceci

* { 
    margin: 0; 
    padding: 0; 
} 
body { 
    background-color: #FFFFFF; 
} 
div#header { 
    background-color: #969696; 
    height: 80px; 
} 
div#mid-bar { 
    background: url(images/home.jpg) left no-repeat #6f6565; 
    height: 200px; 
} 

#searchbox { 
    background-color: #c1c1c1; 
    width: 200px; 
    height: 180px; 
    margin: 10px 20px 10px 350px; 
} 

et mon html

<div id="header"> 

    </div> 
    <div id="mid-bar"> 
     <div id="searchbox"> 

     </div> 
    </div> 

vous pouvez voir le problème. l'espace entre l'en-tête et la barre médiane qui est créé en raison de la marge donnée dans la div searchbox. je veux cette marge pour searchbox dans le div diviseur ... et pas de div en-tête.

Answer 1

I est un connu bug: utiliserait le remplissage au lieu de la marge. si:

div#mid-bar { 
    background: url(images/home.jpg) left no-repeat #6f6565; 
    height: 200px; 
padding-top: 10px; 
} 


#searchbox { 
    background-color: #c1c1c1; 
    width: 200px; 
    height: 180px; 
    margin: 0px 20px 10px 350px; 
} 

Answer 2

à # padding Donner mi-bar au lieu de marge searchbox

Answer 3

J'ai vu cela se produire lorsque vous ne donnez pas les marges aux parents et le premier élément, même un enfant que vous donnez à la marge, provoque des lacunes chez les parents en créant des marges. Une façon dont j'ai surmonté ceci est en utilisant des paddings sur les conteneurs parents au lieu des marges.

Consultez votre exemple ici avec rembourrages: http://jsbin.com/ememi3

Answer 4

Si vous avez l'intention d'utiliser les marges, essayez de margin:0; à # mi-bar. Sinon, donnez # padding-top:10px; à la barre médiane et supprimez la marge supérieure de #searchbox.

Answer 5

Tout le monde semble d'accord sur celui-ci, le rembourrage fonctionnera beaucoup mieux que les marges. Je l'ai regardé un peu et il semble que Pixeline a raison, c'est un bug connu dans Firefox, j'espère qu'ils vont le corriger en 4.