Comment ajouter un espacement vertical entre les éléments de bloc, mais pas en haut et en bas

Dire que j'ai un tas de P, LI, ou les éléments DIV, avec rien entre eux. Je veux contrôler l'espacement vertical entre eux, de sorte qu'ils ne rentrent pas si bien. Mais je ne veux pas ajouter n'importe quel espace en haut et en bas, puisque c'est géré par le parent de l'élément et je n'ai pas besoin de plus. Est-il une manière simple de faire ce qui fonctionne pour tous les éléments de bloc?

Dire que j'ai quelque chose comme ceci :

p {
  margin: 5px 0;
  }

et puis

 <div>
   <p>1</p>
   <p>2</p>
   <p>3</p>
   <p>4</p>
 </div>

Mais je ne veux pas 5px au-dessus de p 1, ou au-dessous de p 4, depuis la div a déjà rembourrage et je ne veux pas aller jouer avec ça. Je veux juste le 10px entre p 1 et p 2, p 2 et p 3, etc.

Je suis sûr que je pourrais faire quelque chose encombrants (et j'ai de nombreuses fois), mais je suis à la recherche de quelque chose de plus propre que je n'ai pas à faire beaucoup de casse pour cette commune de la situation.

Pouvez-vous montrer un exemple de ce que vous avez essayé? Juste le texte n'est pas assez pour comprendre votre problème.
veuillez clair ce que vous voulez
désolé, il n'était pas clair, édité.
Le plus simple serait d'utiliser p:last-item { margin: 0; }
ouais c'est probablement la plus facile, mais votre réponse que j'ai accepté, ci-dessous est l'approche élégante que je connaissais avaient d'exister. 🙂

OriginalL'auteur rob | 2012-04-25

  1. 32

    À côté de sélecteurs

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

    Fondamentalement, le concept est que, si un p vient après l'autre p donner 10px marge entre les deux.

    Vous utilisation est quelque chose de semblable à

    p + p, li + li, div + div { 
    margin-top: 10px;
}

    OriginalL'auteur Starx

  2. 3

    Cela peut aussi être fait en utilisant :last-child ou :first-child

    Voici un exemple:

    p, li, div {
    margin-bottom: 10px;
}

p:last-child, li:last-child, div:last-child {
    margin-bottom: none;
}
    c'est mieux si vous le mettez dans votre réponse précédente 🙂
    En fait voir this, de ses une deuxième réponse valide
    J'utilise stackoverflow à partir d'un an maintenant & je n'ai jamais vu une personne donner deux réponses pour une même question. Ils ajoutent que l'autre alternative, et là même réponse.
    Aucune infraction, mais avez-vous seulement pris la peine de lire le post, je lien. Il est parfaitement correct de poster des réponses multiples. Juste besoin d'avoir une raison valable.
    La réponse la plus populaire sur cette question sur la méta en parle très distinctes (très subjectif) et @sandeep pourraient ne pas se sentir que ces deux réponses ont été très distinctes. Si vous regardez plus loin, vous verrez que jeff-attwood n'est pas du camp qui pense un seul utilisateur doit répondre à deux fois. Il semblerait que tout le monde est à droite sur cette question maintenant puisque c'est une opinion personnelle sur quand c'est ok de se scinder en deux réponses. Merci pour le lien btw 🙂

    OriginalL'auteur Starx

  3. 2

    Vous pouvez utiliser sélecteur adjacents. Vous pouvez définir comme ceci:

    p + p{
 margin-top:0;
}

    OU

    p ~ p{
 margin-top:0;
}

    OriginalL'auteur sandeep

  4. 0
    p, li, div {
    margin-bottom: 10px;
}
#parentID {
    margin-bottom: -10px;
}
    Merci, mais que la médiocrité est ce que je fais maintenant. En espérant une manière plus propre.

    OriginalL'auteur kayen

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

    C'est-à une supérieure de la marge de 10px pour tous p éléments et d'autres marges à zéro, sauf pour le premier p élément pour lequel vous avez encore de la marge supérieure à zéro.

    Cela fonctionne plus largement que de nombreuses autres approches, qui utilisent les sélecteurs contextuels qui ne sont pas pris en charge par les anciens navigateurs. Pour obtenir vraiment maximale prise en charge du navigateur, vous pouvez assigner une classe à la première p élément de balisage et d'utiliser un sélecteur de classe au lieu de p:first-child.

    C'est le plus simple possible, depuis le CSS fonctionne sur des éléments, et non pas sur ce qui est entre les éléments. Si vous avez besoin d'un moyen de distinguer la première p élément dans une séquence de p éléments.

    Noter que p { margin: 5px 0; } (mentionnés dans la question) serait de créer vertical en marge de 5px, pas de 10px, parce que adjacentes verticale marges s'effondrer.

    OriginalL'auteur Jukka K. Korpela