How to space the children of a div with css?

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

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

I want all of them to have a space of 30px; between them. How can I do this with CSS?

For an unknown amount of children you could use.

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

This will add a top and bottom margin of 30px to all direct children of #parent.

But img is not displaying as block default, so you may use:

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

Vertical margins of block elements will be collapsed. But you will have margins at top and bottom of your parent div. To avoid that use the following code:

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

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

This will only add top margin and removes that top margin for the first element.

The following css will work well

div > *:not(:last-child) {
    display: block;
    margin-bottom: 30px; 
} 

> selects all elements that are direct children of the div (so you don't get weird inner spacing issues), and adds a bottom margin to all that aren't the last child, using :not(:last-child) (so you don't get a trailing space).

display: block makes sure all elements are displayed as blocks (occupying their own lines), which imgs aren't by default.

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.

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.

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.

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

Use CSS gap property.

.parent_class_name{
  gap: 30px;
}

The above CSS code will apply a gap/separation of 30px between children of the parent_class_name class.

Example: This code will apply 1rem gap between element (rows and columns).

<div class="gap_container">
  <div>a</div>
  <div>b</div>
  <div>c</div>
</div>

.gap_container{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

> The gap property defines the size of the gap between the rows and columns. It is a shorthand for the following properties: > - row-gap > - column-gap

Apply row and column values separately. gap: row-value column-value;

Learn more: w3school

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>

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;
}