views:

633

answers:

5

As I understand, width/padding/margin properties only work on block level elements. However, on INPUT and SELECT elements I am able to specify the width, which works. Should it?

I could write something like this:

<input type="text" style="display:block;" />

But is it necessary?

Can anyone explain please why it works?

A: 

Did you thing what happened if that would be not possible? When INPUT element was introduced there was no CSS. And width of INPUT element is absolutely required in HTML for creating proper forms.

Thinker
I see... The what is the proper way to do it these days? Specify display:block on them or just regard these elements as a historical exception?
User
Display:block should be only used if you need it for some reasons.
Thinker
+3  A: 

Actually, they're not really inline elements, but rather inline-block elements. This allows you to specify width, height and other block-specific properties without the need to break the flow of inline elements. In good browsers you can use "display:inline-block" on any element to achieve the same thing.

Ionuț G. Stan
While it isn't an extensive test, in Firefox 3 at least, the computed style of an input element (with no author styling to change it) is display: inline - not inline-block.
David Dorward
@David, yes, you are right, although I assume (I couldn't find any evidence) that Mozilla uses "display:-moz-inline-box" internally. I've done some tests too and it appears that IE8 and Chrome2 report "inline-block" for SELECT elements, while Opera9 reports "inline". That being said, I believe your answer is the correct one, but it's pretty safe to assume "display:inline-block" for such elements.
Ionuț G. Stan
A: 

Form elements are the black sheep of the HTML/CSS world - there's lots of properties which don't work like normal HTML elements.

While it doesn't answer yor question, you might find the following discussion interesting: http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/

wheresrhys
A: 

Technically, that's a rendering property which is browser-specific. At this point most browsers do allow you to set the width, but it's not guaranteed (especially on older browsers) and you definitely can run into bugs with it.

The W3 spec for the input element technically makes it an inline element. Inline-block isn't even a part of the W3 spec, it's part of CSS2 (hence older browsers being inconsistent).

IE has some funny bugs if you specify width as a percentage and put a whole lot of text into it, for example.

Long story short, it's almost always safe, just not part of any official spec that I've seen.

Gabriel Hurley
+4  A: 

The spec says:

Applies to: all elements but non-replaced inline elements, table rows, and row groups

Form controls, such as input and select elements are replaced inline elements (the element is replaced with a form control - the text content of it is not displayed like a normal element).

Since they are replaced, they are not non-replaced, so the width property applies.

David Dorward