Question

I have some markup here:

<label>Username:</label>

<div class="input small"><div class="left"></div><div class="right"></div><div class="center">
    <input name="username" type="text" />
</div></div>

<label>Password:</label>

<div class="input small"><div class="left"></div><div class="right"></div><div class="center">
    <input name="password" type="password" />
</div></div>

And CSS:

label {
    padding-top: 5px;
}

For some reason, the padding on my two label elements is not working. Tried in IE and Firefox, and it isn’t working in either case. Firebug says the padding is there, but it just isn’t doing anything. Tried setting the padding to 50px, and still nothing.

Any ideas?

Answer 1

A label is an inline element and so is not affected by top and bottom padding. You need to make the label a block level element for it to work:

label{
    display: block; /* add this */
    padding-top: 5px;
}