How to Space The Children of a Div with CSS

How to space the children of a div 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.

How to space children evenly horizontally in css

Will something like this be a good start?

.container {  width: 80%;  margin: 0 auto;  background-color: #eee;  text-align: center;}
.item {  display: inline-block;  width: 15%;  height: 60px;  margin: 10px 2%;  background-color: #bbb;}

<div class="container">  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div></div>

How to make a child div take up all the horizontal space when the parent has overflow: scroll

You can achieve this by wrapping you text in a span like this and adding the color to span.

.parent {  width: 400px;  max-width: 400px;  overflow: scroll;}
.child {  white-space: nowrap;  display:table-row;  background: skyblue;}

<div class="parent">  <div class="child">    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.  </div>  <div class="child">second child</div>  <div class="child">third child</div></div>

How to create a div container with equal spacing on child divs

why don't you just cancel the margin for the first child?

like this:

.child:first-child {margin:0;}

http://jsfiddle.net/vfcjwqy7/

Add margin between all direct children of a div except the last one

Is what you're looking for:

.single .container > *:not(:last-child) {
    margin-bottom: 24px;
}

The issue is that you had:

.single .container > * :not(:last-child) {}
                      ^
                  This space

Which is saying:

Apply a margin-bottom to all elements that are descendants of any element, so long as they're not the last-child, when compared to their siblings, that are themselves the direct child of .container elements, which are themselves descendants of .single elements.

You want to apply the filter to all of the direct children, not just any descendant of any element (the wildcard selector [*]).

If that makes sense?

.container > *:not(:last-child) {
  background-color: red;
  margin-bottom: 24px;
}

<div class="container">

  <p>Lorem ipsum dolor sit amet</p>

  <h2>Title H2</h2>
  <h3>Title H3</h3>
  <h4>Title H4</h4>

  <blockquote class="wp-block-quote" id="output"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
    officia deserunt mollit anim id est laborum.</p>
    <cite><strong>Firstname Lastname</strong> – Job at Company</cite>
  </blockquote>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua.</p>

  <div class="wp-container-3 wp-block-columns">
    THIS IS WHERE THE CSS IS NOT APPLIED
    <div class="wp-container-1 wp-block-column" style="flex-basis:20%">
      <figure ...></figure>
    </div>
    <div class="wp-container-2 wp-block-column" style="flex-basis:80%">
      <blockquote class="wp-block-quote is-style-plain" id="output">
        <p>Use the “plain” style for blockquotes.</p>
        <cite><strong>Firstname Lastname</strong> – Job at Company</cite>     
      </blockquote>
    </div>
  </div>
</div>

Children divs of a parent grid do not fill all the available space

If you only have one row and want all children to be the same size, then the usual approach for me would be to use display: flex on the parent and flex-grow: 1; flex-basis: 0 on the children. No need for flex-direction: row. Also make sure that the parent is actually the width you expect, i.e. it also fills the whole width.

---

Related Topics