html - 如何在同一列中的两个 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 */
}