css - 在 DIV 上方和下方留出空间

Question

我想在其内容上方和下方提供一个 DIV 空间。

如何使用 CSS 做到这一点？

我的 DIV 代码是：

<div class="input">
    <label for="pseudo">choisir un pseudo*:</label>
    <br>
    <input type="text" name="pseudo">
</div>

Answer 1

您使用 CSSpadding属性。在您的情况下，您可能想单独使用padding-top和。padding-bottom

语法如下：

padding: top right bottom left;

或者

padding: vertical horizontal;

一些例子：

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

阅读有关HTML 框模型的更多信息

Answer 2

我不确定你是什么意思。内部空间还是外部空间？

假设你的意思是在外面：

.input {
   margin: 20px 0;
}

如果您的意思是在 div 内，则可以使用填充。

Answer 3

我猜你正在寻找填充物。

<div class="input" style="padding-top:10px;padding-bottom:10px">
  <label for="pseudo">choisir un pseudo*:</label>
  <br />
  <input type="text" name="pseudo">
</div>

希望它有帮助，维戈

Answer 4

如果您想要 div 行之间的额外空间（超过默认空间），那么您可以在 div 行开始之前/之后添加以下代码，具体取决于您想要额外空间的位置。

<div class="row">
   </br>
 </div>

这更容易，但会增加固定数量的差距。如果您希望间隙更具体，则可以使用上述填充选项。