如何在同一列中的两个DIV之间设置间隔

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

HTML代码

    <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

我的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;
}

Like here 如何在同一列中的两个DIV之间设置间隔

像这里

3 个解决方案

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

#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.

编辑-我已经修改了上面的小提琴，以做我认为你想做的，尽管你的问题真的可以做得更清楚。类似于@balexandre的答案，尽管我使用的是:nth-child(奇数)。两者都可以，或者如果对旧浏览器的支持很重要，那么您必须坚持使用另一个helper类。

#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

在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

例如:http://jsbin.com/ozarot/edit javascript、html、生活

#1