web-dev-qa-db-fra.com

Espace entre deux divs

Mon problème est que j'ai deux divisions (ou plus) de la même classe, qui doivent être espacées l'une de l'autre. Cependant, je ne peux pas utiliser directement les marges, car le dernier ou le premier élément aurait également la marge appliquée, ce que je ne veux pas.

example
- Le vert est l'endroit où je veux l'espace
- Le rouge est là où je ne veux pas

Comme les seules solutions auxquelles je peux penser sont compliquées/impliquent de coder en dur une valeur, j'espère que quelqu'un pourra penser à une solution intelligente et simple à ce problème.

Détails: Parfois, ces divs seraient par eux-mêmes, et en de rares occasions flottaient.

Tout conseil sur la façon dont les idées ci-dessus pourraient être meilleures, toute nouvelle idée ou simplement une aide en général serait grandement apprécié;)

csshtmlcss3space
18
Fewfre

Vous pouvez essayer quelque chose comme ceci:

h1{
   margin-bottom:<x>px;
}
div{
   margin-bottom:<y>px;
}
div:last-of-type{
   margin-bottom:0;
}

ou au lieu du premier h1 règle:

div:first-of-type{
   margin-top:<x>px;
}

ou encore mieux utiliser le sélecteur de frère adjacent . Avec le sélecteur suivant, vous pouvez couvrir votre cas dans une seule règle:

div + div{
   margin-bottom:<y>px;
}

Respectivement, h1 + div contrôlerait la première div après votre en-tête, vous offrant des options de style supplémentaires.

24
Christoph

Si vous n'avez pas besoin de support pour IE6:

h1 {margin-bottom:20px;}
div + div {margin-top:10px;}

La deuxième ligne ajoute un espacement entre les divisions, mais n'en ajoutera pas avant la première division ou après la dernière.

8
Matt Coughlin

Pourquoi ne pas utiliser la marge? vous pouvez appliquer toutes sortes de marges à un élément. Pas seulement toute la marge autour d'elle.

Vous devez utiliser les classes css car cela fait référence à plusieurs éléments et vous pouvez utiliser des identifiants pour ceux que vous souhaitez être spécifiquement différents

c'est à dire:

<style>
.box { height: 50px; background: #0F0; width: 100%; margin-top: 10px; }
#first { margin-top: 20px; }
#second { background: #00F; }
h1.box { background: #F00; margin-bottom: 50px;  }
</style>

<h1 class="box">Hello World</h1>
<div class="box" id="first"></div>
<div class="box" id="second"></div>​

Voici un exemple jsfiddle:

RÉFÉRENCE:

5
Michael Zaporozhets

Les DIV n'ont intrinsèquement aucun sens utile, autre que de diviser, bien sûr.

Le meilleur plan d'action serait de leur ajouter un nom de classe significatif et de styliser leurs marges individuelles en CSS.

<h1>Important Title</h1>
<div class="testimonials">...</div>
<div class="footer">...</div>

h1 {margin-bottom: 0.1em;}
div.testimonials {margin-bottom: 0.2em;}
div.footer {margin-bottom: 0;}
1
Jason Hibbs