css écart vertical entre divs

Question

Je sais que c'est un problème commun, mais je n'arrive pas à trouver une solution qui fonctionne. J'ai une configuration comme ceci:

<div id="wrapper"> 
    <div class="content-area-top"></div> 
    <div class="content-area"> 
    <h1>Title</h1> 
    some other text 
    </div> 
</div> 

.content-area-top { 
    height: 12px; 
    width: 581px; 
    background-image: url(images/content-top.jpg); 
} 

.content-area { 
margin-left: 10px; 
margin-right: 10px; 
    background-color: #e9ecfd; 
} 

Le problème est qu'il ya un écart entre .content-zone-haut et .content zone. le div de .content-area-top est dimensionné pour contenir une image de fond qui me donne les coins arrondis que je veux. Je sais que ce problème vient du fait que la balise H1 a un ensemble de marge supérieur (par défaut du navigateur) (.67em), mais je ne veux pas mettre sa marge à 0, et je ne vois pas pourquoi la marge s'applique "en dehors" de son div contenant. J'utilise chrome sur Mac, mais Firefox a le même problème. C'est probablement une correction bien connue, mais je n'ai pas trouvé de solution spécifique à mon cas.

Answer 1

Voir ici pour une question connexe:

Why would margin not be contained by parent element?

dans lequel un grand article sur l'effondrement de la marge est présentée:

http://reference.sitepoint.com/css/collapsingmargins

L'article a quelques pointeurs.

La réponse est que la marge sur H1 se réduit avec sa marge parente (.content-area) (0 dans ce cas), et donc la div parente prend la marge H1. Pour éviter cela, la div parente (.content-area) doit avoir un ensemble de remplissage ou une bordure ou quelque chose de défini pour empêcher l'effondrement (qui, dans mon cas, rassemble mes deux div correctement)

Answer 2

Essayez cette approche :

#content-area-top { 
    width:581px; 
    height:12px; 
    float:left; 
    background-image:url("images/content-top.jpg"); 
} 

#content-area { 
    width:561px; /* substract margin left & right values from it's width */ 
    float:left; 
    display:inline; /* prevent ie6-double-margin bug */ 
    margin:0 10px; 
    background-color:#e9ecfd; 
} 

#wrapper { 
    width:581px; 
    float:left; 
} 

Answer 3

Les marges ne sont pas supposées se replier s'il y a une bordure entre elles. Vous pouvez donc ajouter une bordure cachée pour empêcher l'effondrement de la marge.

Ce qui suit a fonctionné pour moi dans mes versions testées de FF, Chrome & IE.

<!-- Set the border-color to your background color. 
    If default white background colour use #FFFFFF --> 
<div style="background-color: #8DB3E2; border-color: #8DB3E2; border-style:solid; border-width:1px; "> 

    <p >Paragraph 1 in blue box</p> 

    <p >Paragraph 2 in blue box</p> 

    </div> 

    <!-- No space here thanks --> 

    <div style="background-color: #9BBB59; border-color: #9BBB59; border-style:solid; border-width:1px; "> 

    <p >Paragraph 1 in green box</p> 

    <p >Paragraph 2 in green box</p> 

    </div> 

Answer 4

Essayez de donner un doctype valide. Cela a fonctionné pour moi :)

Référer ceci: A list apart l'a dit magnifiquement!

Yogesh