48

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?

dqhendricks
  • 19,030
  • 11
  • 50
  • 83
  • Please show the actual relevant code instead of making us sift through source next time. – Ry- Aug 23 '11 at 23:18
  • I'm using a public computer. No. And even if I did - what if someone didn't? – Ry- Aug 23 '11 at 23:23
  • Okay. But http://jsfiddle.net/ is a better way to put across code snippets and show them in action. For future reference. – Ry- Aug 23 '11 at 23:25

5 Answers5

89

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;
}
tw16
  • 29,215
  • 7
  • 63
  • 64
  • 8
    I would make it `inline-block` to benefit from both. – BeemerGuy Aug 23 '11 at 23:23
  • 2
    It's worth noting that `inline-block` doesn't work on all browsers. IE <= 8 don't support it. There are hacks around, but by default, no worky. – Alastair Pitts Aug 23 '11 at 23:27
  • @Alastair Pitts: `label` is an inline element in HTML, so IE6/7/8 all support `display: inline-block` on it. IE8 has full support. – BoltClock Aug 23 '11 at 23:29
  • 1
    @Alastair Pitts: That's not strictly true; IE7 supports `inline-block` on elements which are `inline` by default (like this `label`) and IE8 does for sure - I thought it supported `inline-block` completely, though. Anyways, it's more like `inline-block` won't work on IE <= 6. – Ry- Aug 23 '11 at 23:29
  • I see. Knew it was something simple. Thank you! – dqhendricks Aug 23 '11 at 23:30
  • @Alastair Pitts, @minitech: Actually, at least five years ago the browser that had the worst `display: inline-block` support was Firefox, not IE; Firefox did not support it *at all* until 3.0. – BoltClock Aug 23 '11 at 23:31
5

Suggesting a better answer for these reasons:

  • Line height doesn't work right with wrapped lines. It looks messy and spaces the wrapped line above it too.
  • Display block or inline-block cause the label to render below things like a checkbox input placed before it.

The solution is to use a :before or :after pseudo selector on the label. This preserves the native inline behavior but still adds padding/margin/height. Example:

/* to add space before: */

label:before {
  display: block;
  content: " ";
  padding-top: 5px;
}

/* to add space after: */

label:after {
  display: block;
  content: " ";
  padding-bottom: 5px;
}

https://jsfiddle.net/0gpguzwh/

dhaupin
  • 1,613
  • 2
  • 21
  • 24
3

Your labels by default are display:inline and as such, don't support setting of padding. The <div> elements surrounding them start block contexts that make it appear as if your <label>s are also block elements.

You can fix this by adding display:block to the CSS for the label.

2

Alternatively, you could use the line-height property:

label {
    line-height: 3;
}
bryceadams
  • 2,182
  • 1
  • 18
  • 16
1

Inline elements aren't affected by padding-top. http://jsfiddle.net/pECCX/

Ry-
  • 218,210
  • 55
  • 464
  • 476