Why does width apply to a button with display inline?
As mentioned in the comments, I'm pretty sure this has to do with browser-specific rendering behavior as is so typical of form elements. What I believe is happening when you set display: inline
on the button is... nothing. Effectively, it's the same as the typical browser default display: inline-block
, on which the width
property does apply.
Refer to section 10.2, which describes the width
property itself. In particular it explains why exactly the width
property does not apply to inline elements (or inline boxes):
This property does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children). Recall that inline boxes flow into line boxes. The width of line boxes is given by the their containing block, but may be shorted by the presence of floats.
In short, it's because the content of inline elements resides in line boxes. The width of a line box cannot be controlled directly; it is determined entirely by the containing block and any incidental floats. You can see an example of line box rendering in section 9.4.2, which describes inline formatting contexts.
If display: inline
actually made a button render as an inline box, all its contents would spill over and it would no longer look, or function, like a button. It makes sense to want to prevent that from happening, and I think that's just what browsers do.
So what exactly do they do to prevent this? Is a button a replaced element? I can't say for sure. But note, in section 9.2.2, it says:
Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.
Section 10 does not explicitly mention atomic inline-level boxes, but it does have sections for calculating dimensions for inline replaced elements, as well as inline-block elements whether replaced or non-replaced, all of which are considered atomic inlines as mentioned above. In all of these cases, the width
property applies as normal if it's not auto
.
So, while it's still debatable whether or not a button is a replaced element, it probably doesn't matter at all for the purposes of this question. But it is still some kind of atomic inline element, since it still participates in an inline formatting context. For what it's worth, though, it appears to shrink to fit its contents if you don't set a width, so its behavior is probably closer to that of an inline-block in that case. One could say then that the actual value of display
becomes inline-block
, although this is never reflected in the developer tools because the computed value does not change (again a side effect of browser-specific rendering behavior).
input, button are inline, still I can set width and height
Depending on the version of CSS you are looking at, they are either replaced inline elements or they are display: inline-block;
. Either way, height
and width
do apply.
Setting the width of inline elements
As others have mentioned, setting the width (or some other position-related property) of an inline element will cause the browser to then display the element as a block element.
You can explicitly declare this sort of behavior through using the CSS display
property. The most common settings are display: inline
(default), display: block
, and display: none
.
A full reference for the display
property is available here.
However, it should be noted that the HTML 4.01 specification discourages the use of "overriding the conventional interpretation of HTML elements":
Style sheets provide the means to
specify the rendering of arbitrary
elements, including whether an element
is rendered as block or inline. In
some cases, such as an inline style
for list elements, this may be
appropriate, but generally speaking,
authors are discouraged from
overriding the conventional
interpretation of HTML elements in
this way.
Related Topics
Display Simple HTML in a Native Blackberry Application
Why Does Angularjs Ng-View Not Work Locally
How to Align Caption Underneath Image
How to Put Text Over an Image Without Absolute Positioning or Setting The Image as Backbround
Balanced Text Wrapping in HTML
How to Apply a CSS Style to an Element Name
Firebug-Like Debugger for Google Chrome
How Is Column Width Determined in Browser
Styling Autocomplete Dropdowns in Browsers
Image Overlay on Responsive Sized Images Bootstrap
Android: How to Add HTML Links Inside a Listview
Phonegap - How to Open External Link Inside The App
Working with Canvas in Different Screen Sizes
Print When Textarea Has Overflow