How to Make a Gap Between Two Div Within the Same Column

How to make a gap between two DIV within the same column

Please pay attention to the comments after the 2 lines.

.box1 {
    display: block;
    padding: 10px;
    margin-bottom: 100px; /* SIMPLY SET THIS PROPERTY AS MUCH AS YOU WANT. This changes the space below box1 */
    text-align: justify;
}

.box2 {
    display: block;
    padding: 10px;
    text-align: justify;
    margin-top: 100px; /* OR ADD THIS LINE AND SET YOUR PROPER SPACE as the space above box2 */
}

Space between two divs in the same row

I would recommend setting border-spacing: 10px; (or any amount that you'd like) on the parent element that is set to display: table;. This is the most effective way to space elements that are using table properties.

If you need more control over your spacing than border-spacing provides, you may need to consider using something other than table-cell for your layout, so hopefully that works out for you!

Here's an update to your fiddle demonstrating the use of border-spacing:

http://jsfiddle.net/vBngZ/7/

Space between two divs

You can try something like the following:

h1{
   margin-bottom:<x>px;
}
div{
   margin-bottom:<y>px;
}
div:last-of-type{
   margin-bottom:0;
}

or instead of the first h1 rule:

div:first-of-type{
   margin-top:<x>px;
}

or even better use the adjacent sibling selector. With the following selector, you could cover your case in one rule:

div + div{
   margin-bottom:<y>px;
}

Respectively, h1 + div would control the first div after your header, giving you additional styling options.

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.

Add gap between two Divs

A couple of points:

1. You shouldn't add extra classes to the Bootstrap columns (that's not a hard and fast rule, but a good recommendation)
2. You are missing the container wrap.

Make changes using those rules and it looks like this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="container"> <div class="row">        <div class="col-md-6">          <div class="row">            <div class="col-md-12">              <div class="well">Left Top Box</div>            </div>          </div>          <div class="row">            <div class="col-md-12">              <div class="well">Left Bottom Box</div>            </div>          </div>        </div>              <div class="col-md-6">            <div class="well">Right Box</div>        </div>    </div></div>

.row {
  margin-bottom: -20px;
}