Discussion :

[pop_up]

Bonjour,

Je voulais avoir votre avis sur la meilleure méthode et la meilleure solution afin d'espacer les éléments. Je m'explique :
Il arrive souvent qu'on définisse des espacements inférieurs sur les éléments <p> (avec un padding-bottom par exemple) pour qu'apres un paragraphe, on ait un petit espace.
Mais parfois les espacements dépendent de l'élément qui suit.
Si par exemple, j'ai une liste qui suit, je ne veux pas d'espacement en plus mais si je met un titre <h2>, je voudrai un gros espacement. Aucun problème me direz vous, il suffit de mettre un padding-top au h2. Oui mais si mon h2 suit un h1 alors le padding-bottom de mon h1 va se cumuler avec le padding-top de mon h2 non ?

Vous faites comment en général ?

merci

[Erwan31]

Salut Pop-up
pour commencer padding n'est pas la propriété la plus appropriée pour espacer des éléments même si cela présente l'avantage d'éviter les problèmes liés à la fusion des marges, voire certain bug de rendu comme le Doubled Float Margin bug. Ils sont fait pour créer un espacement entre le bord de la boîte et la zone de contenu.
Les padding verticaux ne fusionnent pas contrairement aux marges, ils se cumulent systématiquement.

Pour ma part pour simplifier les chose et éviter de faire des calculs dus à la fusion des marges, s'aggissant des paragraphe par exemple, j'annule la marge haute par default et je place une marge basse en em pour que celle-ci s'agrandisse proportionneljement à la taille du texte (margin: 0 0 1em; par exemple}. Pour les titres je met une marge haute supérieure à la marge basse,
pour des raisons de mise en page (margin: 2em 0 1em;)

[pop_up]

Merci erwan pour ta reponse. En fait cette question me vient car les clients ont souvent des besoin contradictoire du style :
besoin 1 : vouloir un espacement de 1em sous tous les paragraphes
besoin 2 : si le paragraphe est suivi d'une liste alors pas d'espacement
besoin 3 : les listes non precedés d'un paragraphes doivent avoir un espacement supérieur de 1em

du coup c'est un peut contradictoire et je vais pas m'amuser à mettre parfois des padding-top et parfois des padding-bottom. c'est pour ça que je me demandai si en général pour le dessus et le dessus d'un élément, il n'était pas préférable d'utiliser le margin afin de fusionner les marges (ce qui ne règlera pas ce problème ^^)

[Erwan31]

Tu as moyen de cibler uniquement certains éléments dans certains cas de figure via les pseudo-classe :first-child et les sélecteurs de frères adjacents:

besoin 2 : si le paragraphe est suivi d'une liste alors pas d'espacement

Ce qui pourrait se traduire (en supposant que la p ait une marge basse de 1em)
par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

p + ul {margin-top:-1em}

mais cela ne fonctionnera pas sous IE6 sur lequel il faudra prévoir une alternative (à defaut d'une solution JS > voir la bibliothèque que propose Dean Edwards) ou une dégradation acceptable.