CSS 在 DIV 上方和下方留出空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15438774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
give space above and below a DIV
提问by Aimad MAJDOU
I want to give a DIV space above and under its content.
我想在其内容的上方和下方提供一个 DIV 空间。
How can I do this using CSS?
我怎样才能使用 CSS 做到这一点？
my DIV code is:
我的 DIV 代码是：
<div class="input">
<label for="pseudo">choisir un pseudo*:</label>
<br>
<input type="text" name="pseudo">
</div>
回答by Sunyatasattva
You use the CSS paddingproperty. In your case you might want to use padding-topand padding-bottomalone.
您使用 CSSpadding属性。在您的情况下，您可能想单独使用padding-top和padding-bottom。
The syntax is the following:
语法如下：
padding: top right bottom left;
or
或者
padding: vertical horizontal;
Some examples:
一些例子：
// This will set the top space to 1px, the right to 2px the bottom to 3px
// and the left to 4px
.input {
padding: 1px 2px 3px 4px;
}
// This will set both the top and the bottom to 20px and the right and the
// left to 10px;
.input {
padding: 20px 10px;
}
// This will set only the bottom space, leaving everything else
// to be automatically determined
.input {
padding-bottom: 20px;
}
Read more about the HTML Box Model
阅读有关HTML 框模型的更多信息
回答by Touch
I'm not sure what you mean. Space within or on the outside?
我不确定你是什么意思。内部空间还是外部空间？
Assuming you mean on the outside:
假设你的意思是在外面：
.input {
margin: 20px 0;
}
If you mean within the div then padding is the one to use.
如果您的意思是在 div 内，则可以使用填充。
回答by Chandana N T
In case you want additional space ( more than the default ) between div rows then you can add the following code before/after the start of the div row depending on where you want the additional space.
如果您需要 div 行之间的额外空间（大于默认值），那么您可以在 div 行开始之前/之后添加以下代码，具体取决于您想要额外空间的位置。
<div class="row">
</br>
</div>
This is easier but will add a fixed amount of gap. If you want the gap to be more specific then you can use the padding options described above.
这更容易，但会增加固定量的间隙。如果您希望间隙更具体，则可以使用上述填充选项。
回答by ViggoV
I guess you're looking for padding.
我猜你正在寻找填充。
<div class="input" style="padding-top:10px;padding-bottom:10px">
<label for="pseudo">choisir un pseudo*:</label>
<br />
<input type="text" name="pseudo">
</div>
Hope it helps, Viggo
希望它有帮助，维戈
