How to Add Space Between Divs

How to add space between DIVs?

put in your css

#access {
  margin-bottom: 5px; /* or whatever */
}

How to add space between a div and the bottom of the page

Just use margin-top instead of top, that way that distance is added at the top instead of the div just being moved by that value, in relation to its original position in the document flow (which doesn't extend the height of the parent element).

div {
  background-color: grey;
  position: relative;
  margin-top: 136px;
}

<div>
  <p>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum</p>
</div>

add a white space between divs

To make perfect center alignment between inline divs, you can use text-align: center on display: inline-block divs.

div.container {  text-align: center;}
div.icon {  width: 30px;  height: 30px;    display: inline-block;  margin: 10px;    background-color: #eee;  border-radius: 100%;}

<div class="container">  <div class="icon youtube"></div>  <div class="icon facebook"></div>  <div class="icon gmail"></div>  <div class="icon site4"></div>  <div class="icon site5"></div>  <div class="icon site4"></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>

Adding space between two divs

from your snippet it seems you are using bootstrap, if this is the case then you can add space between two horizontal divs in bootstrap as follow:

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>

where: col-ms-offset-{value}. add space (as specified) to the left of the div. and you should remember that the size of all divs including offsets, must sum to 12 in bootstrap grid system as the above example.

Space appearing between divs

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

keep space between div's

This was based on your original screenshot images of your code: basically you should use display:inline-block instead of position:absolute to prevent your bullet from overlapping your text, and then use a margin-left on the bullet so that it always has enough space between it and the text.

.list-block ul {  padding: 0;  margin: 0;}
.list-block li {  list-style: none;}
.statusdiv {  white-space: nowrap;}.statusbeschreibung {  margin-left: 40%;  display: inline-block;  vertical-align: middle;}.statuskreis {  width: 25px;  height: 25px;  margin-left: 10px;  border: 1px solid black;  text-align: center;  border-radius: 12.5px;  display: inline-block;  vertical-align: middle;}.status-on {  background-color: green;}.status-off {  background-color: red;}

<div class="list-block">  <ul>    <li>      <div class="statusdiv">        <p class="statusbeschreibung">Motorstatus</p>        <div name="motorstatus" id="motorstatus" class="item-link statuskreis status-off"></div>      </div>    </li>    <li>      <div class="statusdiv">        <p class="statusbeschreibung">Motorstatus</p>        <div name="motorstatus" id="motorstatus" class="item-link statuskreis status-on"></div>      </div>    </li>  </ul></div>

Put spacing between divs in a horizontal row?

A possible idea would be to:

1. delete the width: 25%; float:left; from the style of your divs
2. wrap each of the four colored divs in a div that has style="width: 25%; float:left;"

The advantage with this approach is that all four columns will have equal width and the gap between them will always be 5px * 2.

Here's what it looks like:

.cellContainer {  width: 25%;  float: left;}

<div style="width:100%; height: 200px; background-color: grey;">  <div class="cellContainer">    <div style="margin: 5px; background-color: red;">A</div>  </div>  <div class="cellContainer">    <div style="margin: 5px; background-color: orange;">B</div>  </div>  <div class="cellContainer">    <div style="margin: 5px; background-color: green;">C</div>  </div>  <div class="cellContainer">    <div style="margin: 5px; background-color: blue;">D</div>  </div></div>

---

Related Topics