Arno Lorentz Arno Lorentz - 2 months ago 9
HTML Question

Why does input element ignore the directional properties?

So I was making some custom style

input
element in HTML and CSS - Link here. But the input element doesn't obey all the directional properties which are
top
,
right
,
left
and
bottom
. The only workaround was using the
top
and
left
and
width: 100%
and
height: 100%
. Any ideas why it doesn't obey all the directional properties?

Edits



I need the input element to fit its parent container.

Answer

That's because inputs are replaced elements. And the algorithm for Absolutely positioned, replaced elements is different than for Absolutely positioned, non-replaced elements:

  1. The used value of width is determined as for inline replaced elements. [...]

  1. If at this point the values are over-constrained, ignore the value for [...] right [...] and solve for that value.

And analogous for the height.

So yes, if you want to ignore the intrinsic size you need width: 100%; height: 100%.