How to space the children of a div with css?

Question

I want a gap of say 30px; between all children of my div. E.g if I have:

    
   
   
...
   

        
                      

              相关标签:
       
      

Answer 1

Just put a top and bottom margin of 30px on your p element:

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

Note: the above will add this margin to all your p elements. To restrict to just this one, either add an inline style attribute:

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

or better use a class:

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

and in css:

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

Btw, the notation here for margin is:

margin: top right bottom left;

Or you can individually specify top and bottom margins:

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

So you could have a class like this:

.bord { margin-bottom: 30px; }

and add this class to every element you want to have a margin-bottom of 30px:

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

Answer 2

Probably the easiest way is this:

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

or

#parent * {
  margin: 15px 0;
}

Keep in mind, though, that this will get everything in #parent, including things inside the p and div tags. If you want just the direct children, you can use #parent > * (this is call the direct descendent selector) instead.

Keep in mind, <img> is an inline element by default, so you might need to do:

#parent img {
  display: block;
}

for it to use the margins.

Answer 3

You can try it by CSS standarts:

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

More info could be found here: http://www.w3.org/TR/CSS2/selector.html#child-selectors

Answer 4

You can easily do that with:

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

This will be applied to all direct children except the first one, so you can think of it as a gap between elements.

Answer 5

Create a CSS class for them with code:

.BottomMargin
{
    margin-bottom:30px;
}

And assign this class to parent's children using jQuery or manually like this:

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

the last one may not have one and this is also doable using jQuery.

Answer 6

Surest way is to add a class to all of the internal elements with the exception of the last one.

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

This way, additional elements can just be tagged with the class. Remember that you can multiclass style elements by separating them within the class value in the tag with spaces, like so:

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

Finally, you can attach the classes dynamically with Javascript (code off the top of my head, not tested, no sanity checks or error handling, ymmv etc.):

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