CSS - 在div元素之间添加空行

Question

我的示例用户界面如下所示：

这里我需要在文本框后面添加一个空行。这意味着第一个文本框后面会出现一个空行，第二个文本框后面会出现另一个空行。以下是我的cshtml文件的样子：

<style>
    .divTable {
        display: table;
        border: none;
    }

    .divRow {
        display: table-row;
        width: 100%;
    }

    .divTable input, .divTable select {
        padding: 2px;
        border: solid 1px #BCC3C8;
        height: 100%;
        width: 100%;
    }

    .divTable button {
        margin-top: -5px;
        margin-left: 8px;
        width: 100px;
    }
</style>

<div class="divTable">
    <div class="divRow">
        <div class="divCell1">@Html.LabelFor(model => model.FirstName)</div>
        <div class="divCell2">@Html.EditorFor(model => model.FirstName)</div>
    </div>
    <div class="divRow">
        <div class="divCell1">@Html.LabelFor(model => model.LastName)</div>
        <div class="divCell2">@Html.EditorFor(model => model.LastName)</div>
    </div>
    <div class="input">
        <input type="submit" value="Submit">
    </div>
</div>

但我没有得到理想的输出。输出与上面的屏幕截图相同。这该怎么做 ？任何帮助表示赞赏。

Answer 1

当一个元素跟随另一个元素时具有样式的css语法是：

element1 + element2{
    //styles
}

所以你可以这样做：

.class_of_element1 + .class_of_element2{
    margin-top:20px;
}

或

#id_of_element1 + #id_of_element2{
    margin-top:20px;
}

SAMPLE JSFIDDLE

Answer 2

在divCell2下方添加保证金：

.divRow .divCell2 {
    margin-bottom: 20px;
}

Answer 3

添加以下内容。您需要添加margin-bottom以根据您的要求添加间距。

对于实例，

.divTable input, .divTable select{margin-bottom:30px;}

PS： 30px是说明性的。您可以根据自己的方便增加/减少。