give space above and below a DIV

Question

I want to give a DIV space above and under its content.

How can I do this using CSS?

my DIV code is:

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

Answer 1

You use the CSS padding property. In your case you might want to use padding-topand padding-bottom alone.

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