How to Add Space Between Elements So They Fill Their Container 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>

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>

Space-between elements in container

minimal solution

body {

  display: flex;

  justify-content: center;

}

.container {

  background-color: yellow;

  width: 200px;

  border: 2px solid black;

  padding: 10px;

}

.checkbox {

  display: flex;

  justify-content: space-around;

  padding: 5px;

}

<div class="container">

  <div class="checkbox">

    <label for="check1">this is 1</label>

    <input name="check1" type="checkbox" />

  </div>

  <div class="checkbox">

    <label for="check2">this is 2</label>

    <input name="check2" type="checkbox" />

  </div>

</div>

Add space between two divs

Add justify-content: space-between; to your flex container (.site-navigation) to move the two child elements to the far left and right. And erase margin: auto; for the two flex items! All other offsets are due to margins (also default margins top and bottom), so you might want to reset these to 0.

.site-header-navbar {
  display: inline-block;
}

nav ul {
  display: inline-block;
  list-style-type: none;
}

nav ul li {
  display: inline-block;
  margin-right: 20px;
}

nav ul li .sale {
  color: #a62120;
}

.site-header-right {
  display: inline-block;
}

.small-container {
  display: inline-block;
}

.search-btn {
  display: inline-block;
  margin-right: 20px;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  color: #555;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 1px;
  font-weight: 500;
}

.site-header-right a {
  display: inline-block;
  margin-right: 20px;
}

.site-navigation {
  display: flex;
  justify-content: space-between;
}

<div class="site-header-masthead">
  <div class="container">
    <div class="row">
      <div class="col-12 navbar">
        <div class="menu-hamburger"></div>
        <div class="toast-logo">
          <a href="index.html"><img src="images/logo.jpeg" width="110px"></a>
        </div>
        <div class="site-navigation">
          <nav class="site-header-navbar">
            <ul class="site-nav">
              <li><a href="https://us.toa.st/collections/women">Women</a></li>
              <li><a href="https://us.toa.st/collections/men">Men</a></li>
              <li><a href="https://us.toa.st/collections/house-home">House&Home</a></li>
              <li><a href="https://us.toa.st/collections/sale" class="sale">Sale</a></li>
              <li><a href="https://us.toa.st/pages/events">Events</a></li>
              <li><a href="https://us.toa.st/blogs/magazine">Magazine</a></li>
              <li><a href="https://us.toa.st/pages/about-us">Our Approach</a></li>
            </ul>
          </nav>
          <div class="site-header-right">
            <div class="small-container">
              <button class="search-btn">Search</button>
              <a href="#" class="site-header-wishlist">
                <span>Saved</span>
                <span>(0)</span>
              </a>
              <a href="#" class="site-header-account">Account</a>
              <a href="#" class="site-header-cart">
                <span>Bag</span>
                <span>(0)</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Fill empty space between two DIV elements

add -webkit-column-count: 3; to parent section container
change you div's class span_2_of_6 to span_1_of_1
add width:100%;margin-left:0 important; to class .col

How to add equal space between inline block elements?

You could use Flexbox and justify-content: space-between;

.container {

  width: 100%;

  border: 1px solid red;

  text-align: center;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  padding: 5px 0;

}

.container .block {

  border: 1px solid green;

  padding: 10px;

}

<div class="container">

  <div class="block">Some block</div>

  <div class="block">Some block</div>

  <div class="block">Some block</div>

  <div class="block">Some block</div>

</div>

Extra Space Between inline-block DIV Elements

You need to comment out the white space between the elements, like so:

<div class="tile-container">
       <div class="tile-large">1</div><!--
    --><div class="tile-wide">2</div><!--
    --><div class="tile-small">3</div><!--
    --><div class="tile-small">4</div><!--
    --><div class="tile-small">5</div><!--
    --><div class="tile-small">6</div><!--
    --><div class="tile-wide">7</div><!--
    --><div class="tile-large">8</div>
</div>

DEMO: http://jsfiddle.net/P7cbA/11/

Another way is to put the elements in the HTML in one line without any spaces between them, but this reduces the code readability:

<div class="tile-container">
       <div class="tile-large">1</div><div class="tile-wide">2</div><div class="tile-small">3</div><div class="tile-small">4</div><div class="tile-small">5</div><div class="tile-small">6</div><div class="tile-wide">7</div><div class="tile-large">8</div>
</div>

Add space between HTML elements only using CSS

A good way to do it is this:

span + span {
    margin-left: 10px;
}

Every span preceded by a span (so, every span except the first) will have margin-left: 10px.

Here's a more detailed answer to a similar question: Separators between elements without hacks

How to Add Space Between Elements So They Fill Their Container Div