CSS width for inline vs. inline-block

Question

I am trying to understand how the "width" style affects a "display: inline" vs. "display: inline-block" element. The key here is understanding, not trying to achieve a specific effect.

My previous understanding was that a "display: inline" element has an intrinsic width (from its contents) that cannot be overriden by a CSS "width" style -- any such style will be ignored. In contrast, a "display: inline-block" element has its width either determined from the context (surrounding block element) or its "width" style, ignoring the intrinsic width of its contents and instead using that outer width to break its contents into lines.

However, that understanding does not seem to match reality. Instead, it seems like "inline" behaves exactly like "inline-block". Example:

<p>
foo <input type="text" name="foo" style="display: inline; width: 500px; appearance: none"> baz
</p>

The "foo" and "bar" strings show the size of the input element as seen from the outside, just in case it differs from its border, but that isn't the case here. The input is set to display:inline, and I confirmed this in the "computed styles" tab in Chrome just to rule out any typo. I would have expected the input to have a width that is intrinsic and comes from its contents, growing as you type text into it. However, this is not the case -- typing text does not change the width, and typing text longer than the input makes the text get clipped at the left side, similar to what one would expect from a display:inline-block element with an appropriate "overflow" style.

Also, the "width" style determines the width of the input, which is unexpected given its display:inline. A quick google search reveals many sources that claim that "width" does not affect a display:inline element, yet it seems that this is exactly what happens.

What am I getting wrong?

Answer 1

input elements behave like inline-block, even if you set display: inline.

<p>
foo <span style="display: inline; width: 300px; background: pink;">inline</span> bar
</p>

<p>
foo <span style="display: inline-block; width: 300px; background: pink;">inline-block</span> bar
</p>

<p>
foo <input type="text" name="foo" style="display: inline; width: 300px; background: pink;" value="inline"> bar
</p>

<p>
foo <input type="text" name="foo" style="display: inline-block; width: 300px; background: pink;" value="inline-block"> bar
</p>