Cómo espaciar a los hijos de un div con css?

Question

Quiero un espacio de 30px; entre todos los hijos de mi div. Por ejemplo, si tengo:

<div id="parent">  
    <img ... /> 
    <p>...</p> 
    <div>.......</div> 
</div> 

Quiero que todos ellos tengan un espacio de 30px; entre ellos. ¿Cómo puedo hacer esto con CSS?

Answer 1

Por una cantidad desconocida de niños que podría usar.

#parent > * { 
    margin: 30px 0; 
} 

Esto añadirá un margen superior e inferior de 30px a todos los hijos directos de #parent.

Pero img no se muestra por defecto bloque, por lo que puede utilizar: se colapsaron

#parent > * { 
    display: block; 
    margin: 30px 0; 
} 

márgenes verticales de elementos de bloque. Pero tendrá márgenes en la parte superior e inferior de su div principal. Para evitarlo, utilice el siguiente código:

#parent > * { 
    display: block; 
    margin-top: 30px; 
} 

#parent > *:first-child { 
    margin-top: 0px; 
} 

Esto solo agregará el margen superior y eliminará ese margen superior para el primer elemento.

Answer 2

Sólo hay que poner un margen superior e inferior de 30px en su elemento p:

p { margin: 30px 0 30px 0; } 

Nota: lo anterior se sumará a este margen todos sus elementos p. Para restringir a sólo esta situación, puede añadir un atributo de estilo en línea:

<p style="margin: 30px 0 30px 0;">...</p> 

o utilizar mejor una clase:

<p class="mypara">...</p> 

y en css:

p.para { margin: 30px 0 30px 0; } 

Por cierto, la notación aquí para el margen es:

margin: top right bottom left; 

O usted ca n especificar individualmente los márgenes superior e inferior:

margin-top: 30px; 
margin-bottom: 30px; 

lo que podría tener una clase como esta:

.bord { margin-bottom: 30px; } 

y añadir esta clase para cada elemento que desea tener un margen-inferior de 30px:

<div class="bord">....</div> 

Answer 3

Crear una clase CSS para ellos con el código:

.BottomMargin 
{ 
    margin-bottom:30px; 
} 

y asignar a esta clase parent 's de los niños que utilizan jQuery o manualmente como esto:

<div id="parent">  
    <img class="BottomMargin" ... /> 
    <p class="BottomMargin">...</p> 
    <div>.......</div> 
</div> 

el último puede que no tienen una, y esto también es factible el uso de jQuery.

Answer 4

Probablemente la forma más fácil es la siguiente:

#parent * { 
    margin-bottom: 30px; 
} 

o

#parent * { 
    margin: 15px 0; 
} 

tener en cuenta, sin embargo, que esto hará que todo en #parent, incluyendo cosas dentro de los p y div etiquetas . Si solo desea los hijos directos, puede usar #parent > * (esto es, llamar al selector descendente directo).

Tenga en cuenta, <img> es un elemento en línea de forma predeterminada, por lo que puede que tenga que hacer:

#parent img { 
    display: block; 
} 

para que utilice los márgenes.

Answer 5

Puedes probarlo por estandares CSS:

div > *{ 
    margin-top:30px; 
} 

Más información se podría encontrar aquí: http://www.w3.org/TR/CSS2/selector.html#child-selectors

Answer 6

manera más segura es agregar una clase para todos los elementos internos con la excepción de la última uno.

<style> 
.margin30 { 
    margin-bottom: 30px; 
} 
<div id="parent">  
    <img class="margin30" ... /> 
    <p class="margin30">...</p> 
    <div>.......</div> 
</div> 

De esta manera, los elementos adicionales pueden etiquetarse con la clase. Recuerde que puede multiclase elementos de estilo separándolos en el valor de la clase en la etiqueta con espacios, así:

<img class="margin30 bigimage" ... /> 

Por último, puede adjuntar las clases dinámicamente con Javascript (código de la parte superior de mi cabeza, no probado, sin comprobaciones de validez o error de manipulación, etc. ymmv):

function addSpace(elementId) { 
    children = document.getElementById(elementId).childNodes; 
    for (i=0;i<(children.length - 1);i++) 
     children[i].className = "margin30 " + children[i].className; 
}