Fusion des marges

Bonjour à tous,

Suite à cet article http://csswizardry.com/2012/06/single-direction-margin-declarations/ je me pose la question sur l'utilisation des fusions des marges pour la mise en forme des marges dans les contenus.

En effet la fusion des marges à un grand intérêt pour moi dans le cas de contenus imbriqués car cela ajoute des marges top et permet de bien aérer les bloques.

Le point négatif et qu'il faut toujours supprimer la marge top du premier élément du bloc.
Si on a un bloc avec une bordure et un padding de 15px par exemple le premier élément va être décalé car il aura les 15px de padding + sa marge top. Du coup c'est moins harmonieux.

Et vous qu'en pensez-vous et comment utilisez vous les marges ?

Salut,

La technique suggérée dans l'article permet justement de limiter l'effet "indésirable" de la fusion des marges ou, en tout cas, d'obtenir un meilleur contrôle du flux vertical.

Si tu oublies le margin-top et utilises, quand nécessaire, un padding-top sur le parent, tu obtiens l'effet escompté...
Personnellement, j'ai toujours trouvé "bizarre" cette fusion des marges entre parent et enfants !
Mais tu as peut-être un cas "visuel" précis en tête. Difficile de dire...

tm

Bonjour,

ça dépend© de ton contenu, du contrôle que tu as dessus côté serveur (contenu généré par des shortcodes, à la SPIP, tapé par des experts de la sémantique HTML ou dans un WySIWYG ou c/c de Word nettoyé à l'arrache ?), si ça doit passer en colonnes parfois, si toutes les combinaisons et imbrications sont possibles ou limitées, etc

Raphaël a retenu une solution proche de ce qui est décrit dans l'article (...)
Contraintes : pour un site où il n'y a pas d'imbrications de contenu et à part le texte/titre/listes au kilomètre que des modules bien connus et générés comme on le souhaite, support complet puis partiel d'IE6 et IE7.
(...) que du margin-top, jamais de margin-bottom, on gère au cas par cas pour les modules avec

* + .module { margin-top: NNNpx; }

Chaque élément et module "Truc" a une marge haute, la valeur par défaut
Quand ça ne convient pas après un autre élément, alors la règle

eltPrecedentQuiVaPas + Truc { margin-top: MMMpx; }

est utilisée pour modifier cette valeur.
Et on se sert encore dans quelques cas (titres principaux du contenu) de

UnCertainElement + * { margin-top: LLLpx; }

faute de pouvoir se servir de margin-bottom et parce qu'il restait quelques cas problématiques.
Modifié par Felipe (22 Oct 2013 - 13:09)

Merci pour vos réponses.

J'utilise principalement la fusion des marges dans du contenu qui peut-être rédigé via un éditeur WYSWYG.

Ma grosse problématique étant le premier élément de mes contenus j'ai trouvé un petite astuce en CSS.

#content *:not(ul):first-child {
	margin-top: 0;
}

Cela permet de garder les marges de fusion sur les ul imbriqués.

Il est possible de la développer plus car ici si le 1er élément est un ul cela ne fonctionne pas.