Vider la première et la dernière marge en CSS

Question

Je souhaite que l'élément supérieur (qu'il s'agisse d'un p, img, hx ou autre) affleure le haut de l'élément parent tout en conservant sa séparation normale entre ses frères et sœurs.

Par exemple, j'ai un div complet de p éléments. Chaque élément p a une marge supérieure et inférieure, disons 10px. Chaque élément p est séparé de 20px (10 de celui ci-dessus et 10 de celui ci-dessous). L'effet secondaire de ceci est que le premier p est abaissé de 10px et le bas p est augmenté de 10px.

Answer 1

L'approche la plus simple est d'utiliser un sélecteur de frères et soeurs:

p + p { 
    margin-bottom: 10px; 
    margin-top: 10px; 
} 

Cette règle s'applique aux paragraphes ne si elles viennent directement après un autre paragraphe. Donc, cette règle ne s'applique pas à votre premier paragraphe, car il ne suit pas un paragraphe.

Si vous voulez l'espace entre chaque paragraphe, mais pas avant le premier et non après la dernière, utilisez ceci:

p + p { 
    margin-top: 20px; 
} 

Answer 2

La manière la plus simple d'y parvenir est d'ajouter uniquement des marges inférieures à vos éléments. Donc dans votre cas, chaque élément p aurait une marge inférieure de 20px. Cela permettra également de conserver l'espacement 20px entre vos éléments p.

Si vous souhaitez supprimer les 20px supplémentaires ajoutés à la dernière étiquette p, vous devez ajouter une marge inférieure négative au conteneur des éléments p.

.container {margin-bottom:-20px;} 
.container p {margin-bottom:20px;} 

Vous pouvez également y parvenir en conservant la partie supérieure séparée et les marges du bas, mais il rend votre code plus complexe:

.container {margin-top:-10px; margin-bottom:-10px;} 
.container p {margin-top:10px; margin-bottom:10px;} 

De plus, cela fonctionne dans tous les navigateurs alors que si vous utilisez des sélecteurs spéciaux , votre CSS ne sera pas appliqué à IE6 et autres.

Answer 3

Vous pouvez également utiliser les sélecteurs de pseudo-:first-child et :last-child si cela est ok avec le les navigateurs que vous supportez. Définissez la marge que vous voulez, puis remplacez-la par des éléments spécifiques.

.container p{margin:10px 0;} 
.container p:first-child{margin-top:0;}