如何在同一列中的两个DIV之间建立间隙

Question

我有两段.这两段落在同一列中.现在我的问题是我需要将两个段落放在两个单独的框中,相互之间.换句话说,两个盒子之间的间隙相互下降.

HTML代码

    <div class="sidebar">

                <div class="box1">
                    <p> 
                    Text is here
                    </p>
                </div>

                <div class="box2">
                    <p> 
                    Text is here 
                    </p>
                </div>

     </div>

我的CSS代码是

.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;
}

像这儿

Answer 1

请注意2行后的注释.

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