28220 sujets

CSS et mise en forme, CSS3

[résolu] Margin-top

Bonsoir,

J'ai un problème avec les margin-top.

Si dans une page, je fais un bloc conteneur et que dans celui-ci je colle un bloc "machin" et que je mets un margin-top au bloc "machin", le "conteneur" descent en même temps que le bloc contenu ....
c'est à dire, le bloc "machin".

Exemple :

body { 
margin : 0;
background-color : #333;
text-align : left;
font-size : 12px;
font-family : verdana; 
  }
  
.rouge {
margin-top : 0;
width : 400px;
background-color : red; 
height : 400px}
  
.blanc{
margin-top : 20px ;
background-color : #fff ; 
width : 300px; 
height : 300px}




<div class="rouge">
<div class="blanc"></div>
</div>


Est-ce que quelqu'un peut me dire pourquoi cela se passe comme ça ?
J'avais dèjà posé la question il y a un bon moment mais je ne suis pas sûr
de m'être bien exprimé a ce moment là.

Merci d'avance. upload/135-margin.jpg
Modifié par krek (02 Aug 2005 - 20:01)
C'est le résultat de la fusion des marges verticales, prévue par CSS2 :
- les marges supérieures des boîtes rouges et blanches sont adjacentes, car elles ne sont séparées par aucun contenu, aucun padding, ni aucune bordure : elles fusionnent, et les deux boîtes prennent alors la même limite de bordure supérieure
- du coup, visuellement, elles se comportent comme si elles partagaient en effet la même marge supérieure.

Pour éviter la fusion des marges dans ce cas de figure, il suffit de séparer les deux marges, c'est à dire :
- d'insérer un contenu HTML dans <div class="rouge"> avant <div class="blanc">,
- ou bien de donner un padding-top à <div class="rouge">
- ou bien de donner une border-top à <div class="rouge">
- ou bien de faire flotter <div class="blanc"> (les marges verticales des flottants ne fusionnent pas)

<edit>le fait qu'une des deux marges soit nulle ne l'empêche pas de participer à la fusion...
<re-edit>Quand on y pense, vu d'un oeil extérieur, ça amène à dire de curieuses choses, CSS, parfois Smiley lol </>
Modifié par Laurent Denis (02 Aug 2005 - 19:14)
Et bien merci bien,
c'est clair propre et précis, j'ai tout compris.

J'avais vraiment des soucis aves ça, (que je reglais à coups de spacer)
au point de me demander si ce n'etait pas mon ordi.

Donc, merci encore me v'la heureux et moins bête. Smiley langue
Sujet clos
Aller à