Why is the padding not working on my label elements?

html css padding
dqhendricks picture dqhendricks · Aug 24, 2011 · Viewed 59.1k times · Source

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

tw16 picture tw16 · Aug 24, 2011

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

Related questions

Why is there an unexplainable gap between these inline-block div elements?

I have two inline-block div elements, that are the same, positioned next to eachother. However there seems to be a mysterious space of 4 pixels between the two divs despite the margin being set to 0. There are no parent divs effecting …

Read More
Padding a table row

<html> <head> <title>Table Row Padding Issue</title> <style type="text/css"> tr { padding: 20px; } </style> </head> <body> <table> <tbody> &…

Read More
How do I prevent the padding property from changing width or height in CSS?

I am creating a site with DIVs. Everything's working out except when I create a DIV. I create them like this (example): newdiv { width: 200px; height: 60px; padding-left: 20px; text-align: left; } When I add the padding-left property, the width of …

Read More