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

Question

I have two paragraphs. The two paragraphs are located in the same column. Now my question is I need to make the two paragraphs in two separate boxes, down each other. In other words, gap between two boxes coming down each other.
HTML Code
<div class="sidebar">
<div class="box1">
<p>
Text is here
</p>
</div>
<div class="box2">
<p>
Text is here
</p>
</div>
</div>
My CSS Code is
.sidebar {
background: red;
margin: 10px;
padding: 0 7px 0 7px;
width: 400px;
border-radius: 10px;
}
.box1 {
display: block;
padding: 10px;
margin-bottom: 30px;
text-align: justify;
}
.box2 {
display: block;
padding: 10px;
text-align: justify;
}
Like here

Answer 1

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 */
}

Answer 2

I'm assuming you want the two boxes in the sidebar to be next to each other horizontally, so something like this fiddle? That uses inline-block, or you could achieve the same thing by floating the boxes.
EDIT - I've amended the above fiddle to do what I think you want, though your question could really do with being clearer. Similar to #balexandre's answer, though I've used :nth-child(odd) instead. Both will work, or if support for older browsers is important you'll have to stick with another helper class.

Answer 3

You can make use of the first-child selector
<div class="sidebar">
<div class="box">
<p>
Text is here
</p>
</div>
<div class="box">
<p>
Text is here
</p>
</div>
</div>
and in CSS
.box {
padding: 10px;
text-align: justify;
margin-top: 20px;
}
.box:first-child {
margin-top: none;
}
Example: http://jsbin.com/ozarot/edit#javascript,html,live

Answer 4

you can use $nbsp; for a single space, if you like
just using single allows you single space instead of using creating own class
<div id="bulkOptionContainer" class="col-xs-4">
<select class="form-control" name="" id="">
<option value="">Select Options</option>
<option value="">Published</option>
<option value="">Draft</option>
<option value="">Delete</option>
</select>
</div>
<div class="col-xs-4">
<input type="submit" name="submit" class="btn btn-success " value="Apply">
<a class="btn btn-primary" href="add_posts.php">Add post</a>
</div>
</form>
CLICK ON IMAGE

Answer 5

#firstDropContainer{
float: left;
width: 40%;
margin-right: 1.5em;
}
#secondDropContainer{
float: left;
width: 40%;
margin-bottom: 1em;
}
<div id="mainDrop">
<div id="firstDropContainer"></div>
<div id="secondDropContainer"></div>
</div>
Note: Adjust the width of the divs based on your req.

Answer 6

I know this was an old answer, but i would like to share my simple solution.
give style="margin-top:5px"
<div style="margin-top:5px">
div 1
</div>
<div style="margin-top:5px">
div2 elements
</div>
div3 elements