Quelqu'un pourrait-il expliquer les marges qui s'effondrent? Je les trouve extrêmement ennuyeux

Question

J'ai un div qui contient un lien:

<div id="like_bar"><a href="#" onclick="return false;" id="like"></a></div> 

Avec un peu de CSS:

#like_bar{ 
    width:140px; 
    height:26px; 
    background:url('bar.jpg'); 
} 
#like{ 
    display:block; 
    width:20px; 
    height:20px; 
    margin:3px 36px; 
    background:url('mini_img.png'); 
} 

Le lien est placé en haut de la barre et les marges sur le lien sont appliqués à la barre.
C'est embêtant.

---

Quelqu'un pourrait-il expliquer ces marges d'effondrement, comment les éviter et à quoi elles servent?

Answer 1

Il y a plusieurs façons de résoudre ce problème.

Peut-être le plus facile pour vous serait ceci:

#like_bar { 
    overflow: hidden 
} 

Autres façons suivantes:

• Ajouter une padding
• Ajouter un border (même border: 1px solid transparent est suffisant)
• float la élément
• position: absolute
• Et, comme dans l'extrait ci-dessus, définissez overflow à une valeur autre que la valeur par défaut visible.

---

Vous avez également demandé:

ce qu'ils sont utilisés pour

Un cas d'utilisation commune est la balise <p>.

Voir: http://jsfiddle.net/thirtydot/tPaTY/

Sans marge effondrements, certaines choses deviendraient ennuyeux.

Answer 2

Parce que je suis paresseux, je vais juste faire un lien vers quelques ressources:

My answer here explique pourquoi le modèle de boîte est la façon dont il est, ce qui est lié à la marge de l'effondrement étant inclus.

Le w3c css spec définit le comportement de réduction des marges. C'est un comportement attendu pour plus de commodité étant donné le modèle de boîte. Vous n'avez pas besoin de vous soucier des doubles marges entre les blocs de contenu. Qu'est-ce que cela ressemble à vous veut réellement quelque padding autour de #like, plutôt que des marges.

Pensez à CSS comme un contenu centré → approche de style, plutôt que d'un → approche en approche.