Margin collapsing à l'aide des pseudo classes :after et :before

Bonjour, j'ai mis au point une technique que je n'avais jamais rencontré jusqu'à présent :

.collapse:after {
    content: '';
    display: block;
    height: 1px;
    margin-top: -1px;
}
.collapse:before {
    content: '';
    display: block;
    height: 1px;
    margin-bottom: -1px;
}

L'avantage que j'y trouve et qu'elle ne définie aucune bordure ou padding. L'inconvénient c'est qu'elle utilise tout de même pas mal de code (mais avis perso, ça ne me gène pas plus que ça).

Démo ici :
http://cahnory.fr/css/margin-collapsing.html

Ça semble fonctionner sur Safari, Chrome, Firefox (3.6 au moins) et IE (testé de la version 6 à 8 à l'aide de http://ipinfo.info/netrenderer/). Si vous pouvez la tester et me mettre ici vos retours ça serait sympa .

Pour ceux que ça intéresse, j'ai créé une fonction LessPHP qui permet de l'utiliser simplement :

@collapse() {
    :after {
        content: '';
        display: block;
        height: 1px;
        margin-top: -1px;
    }
    :before {
        content: '';
        display: block;
        height: 1px;
        margin-bottom: -1px;
    }
}

Modifié par cahnory (17 May 2011 - 18:51)

Je ne comprends pas bien l'intérêt...

Peut-être que cet article : http://www.alsacreations.com/article/lire/629-fusion-des-marges.html pourra t'éclairer un peu

Cette article explique bien le phénomène de la fusion des marges (que je connaissais)... Mais pas l'intérêt de ta solution.

Ce genre d'effet peut être simplement obtenu avec un padding; et :after/:before ne sont supportés qu'à partir d'IE7. Je vois mal comment ça peut fonctionner sous IE 6-7 comme tu le dis ?

En pratique, tu appliquerais cette technique dans quel cas ?
Modifié par Vaxilart (17 May 2011 - 22:52)

Je sais ce qu'il se dit sur IE6 et ces pseudo classe mais pourtant ça fonctionne.

L'intérêt de ma solution et justement de n'avoir ni padding, ni border.
Les avantages ?
Ne pas se soucier de ce que contiendra le block. Imaginons un cas ou un <p> aura une marge verticale de 15px et le block contenant un padding vertical de 1px (donc marge à l'intérieur). Si je veut jouer au maniaque (ce que je suis un peu mais disons, si l'on veut une solution théoriquement juste), j'aurai 15px entre chaque <p> mais 16px en haut du premier <p> ainsi qu'en bas du dernier. Dans le cas d'un élément sans marge que fait-on du pixel en plus ?
Retrouver la maitrise complète sur les padding et border qui peuvent être réutiliser (ou non) sans se soucier du problème de fusion des marges (déjà réglé donc).

Enfin je ne disais pas que ma solution était mieux, simplement qu'elle existait. Je ne suis pas là à dire oubliez tout ce que vous avez appris sur la fusion des marges .

Bonjour,

je ne comprend pas trop ou tu veut en venir ou je n'ai pas compris ce que tu veut démontrer.
generalement je fais un truc du genre :

#right .collapsedBlock {padding:0.1px;}

ou bien j'en passe pas un reset general ou sur certaines zones.

Pour ce qui est d'un vrai IE6 ,
- les deux colonnes sont l'une sur l'autre (50% + 50% + les 3px de bug sur les flottants + le width egale a un min-width si il n'est pas contenu avec un overflow:hidden = + plus de 100% de largeur a coup sur dans IE6 )
- et leurs paragraphes n'affichent aucune marges entre eux (je dis bien dans les 2 colonnes et dans un veritable IE6 sous xp).

Cordialement,

GC