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あなたの場合、 and を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>

お役に立てば幸いです、ヴィゴ