How to Set Space Between Contained Divs

Set space between divs

Float them both the same way and add the margin of 40px. If you have 2 elements floating opposite ways you will have much less control and the containing element will determine how far apart they are.

#left{
    float: left;
    margin-right: 40px;
}
#right{
   float: left;
}

How to set space between contained divs?

You may need to use nth-child(4n)

.inner {
  margin-right: 20px;
}
.inner:nth-child(4n){
  margin-right:0px;
}

Codepen: https://codepen.io/abozanona/pen/RwbqmZb

Space appearing between divs

Your h2 has margin that escapes its container and pushes the outer divs. Remove the h2 or remove its margin.

How to make space between elements inside div container

You can use flex with the column-gap property.

Also, setting justify-content: space-between will ensure an even space between elements if the width of the parent container increases.

.container {  display: flex;  column-gap: 20px;  justify-content: space-between;}
.element {  background: yellow;}

<div class="container">  <div class="element">my element</div>  <div class="element">my element</div>  <div class="element">my element</div>  <div class="element">my element</div>  <div class="element">my element</div>  <div class="element">my element</div>  <div class="element">my element</div></div>

How to add space between elements so they fill their container div?

You can do this with Flexbox and justify-content: space-between.

.content {  display: flex;  justify-content: space-between;  max-width: 400px;  margin: 0 auto;  background: #A0C5E8;  padding: 10px 0;}
span {  width: 50px;  height: 50px;  background: black;}

<div class="content">  <span></span>  <span></span>  <span></span>  <span></span></div>

Two divs inside a parent one (with a space between them)

Your had the right idea using CSS tables (display: table).

However, you do not need to use float in this layout.

Here is a proof-of-concept example.

Apply display: table to the parent container and display: table-cell to the three child div's.

Set a width to the .spacer element. The two .column elements will then auto-size to take up the remaining width of the table width.

Note: You can convert the CSS rules into inline styles as needed.

.table-wrapper {  display: table;  width: 100%;}.table-wrapper .column, .table-wrapper .spacer {  display: table-cell;}h2 {  background-color: lightgray;  text-align: center;}.table-wrapper .spacer {  width: 10px;}

<div class="table-wrapper">  <div class="column">    <h2>Your 1st Header</h2>    <p>Some content...</p>  </div>  <div class="spacer"></div>  <div class="column">    <h2>Your 2nd Header</h2>    <p>Some more content...</p>  </div></div>

give space above and below a DIV

You use the CSS padding property. In your case you might want to use padding-topand padding-bottom alone.

The syntax is the following:

padding: top right bottom left;

padding: vertical horizontal;

Some examples:

// This will set the top space to 1px, the right to 2px the bottom to 3px
// and the left to 4px
.input {
    padding: 1px 2px 3px 4px;
}

// This will set both the top and the bottom to 20px and the right and the
// left to 10px;
.input {
    padding: 20px 10px;
}

// This will set only the bottom space, leaving everything else
// to be automatically determined
.input {
    padding-bottom: 20px;
}

Read more about the HTML Box Model

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.