給出一個DIV上方和下方的空間

Question

我想給上方和下方的DIV空間內容。

我怎樣才能做到這一點使用CSS？

我DIV代碼：

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

Answer 1

您可以使用CSS padding property。在你的情況下，你可能想單獨使用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 Box Model

Answer 2

我想你正在尋找填充。

<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 3

我不知道你的意思。外面或外面的空間？

假設你的意思在外面：

.input { 
    margin: 20px 0; 
} 

如果你指的是DIV內，則填充是使用一個。

Answer 4

如果您想格行之間的額外空間（比默認的多），那麼你可以根據你想要的額外空間之前添加以下代碼/股利行開始後。

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

這很容易，但會增加一個固定的差距。如果你希望差距更加明確，那麼你可以使用上面描述的填充選項。