1

I was under the impression that inline elements could not have their heights resized, but I am able to do so with <input type="text"/> elements.

Am I correct that <input type="text"/> elements are inline?

If so, what makes them different from <span></span> elements in how they can or cannot be resized.

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
bingles
  • 11,582
  • 10
  • 82
  • 93
  • Can you share your css where you are not able to apply width to your input tag? – Mr. Alien Nov 12 '13 at 03:22
  • I was actually confused why I was *able* to set the width of my elements. Simple answer was that elements are inline-block not inline. I have accepted JoshC's answer. – bingles Nov 12 '13 at 04:12

3 Answers3

7

An input element is inline-block by default, not inline.

On the other hand, an element such as a span, is inline by default.

The width/height of an inline-block element, such as input can be changed (example).

While an inline element, for instance, span, cannot be changed by default, as its dimensions are defined by the "rendered content within them". (example).

This [width] 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. - W3 reference

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • 1
    Awesome. I had misread somewhere that input elements are inline as opposed to inline-block. Makes perfect sense the behavior I was seeing. Thanks. – bingles Nov 12 '13 at 04:09
0

They're rendered as inline-block per default. This is why you can specify a width. You can see this in chrome dev tools for example.

http://codepen.io/johannesjo/pen/BrcuE

hugo der hungrige
  • 12,382
  • 9
  • 57
  • 84
  • 1
    Images are not inline-block by default. – Jezen Thomas Nov 12 '13 at 03:33
  • @hugoderhungrige Not by default, they are inline element. – Josh Crozier Nov 12 '13 at 03:34
  • @hugoderhungrige: No, they are not. – Jezen Thomas Nov 12 '13 at 03:34
  • You're right, but they exactly behave like inline-blocks. You can specify a margin, padding, width and height for images via css, so apart from that they're said to be inline, I can't see much of a difference here. But as this might be missleading I removed it from my answer. http://stackoverflow.com/questions/2402761/img-elements-block-level-element-or-inline-element – hugo der hungrige Nov 12 '13 at 03:40
0

There is a difference between inline and inline-block.

You can change the height of the inline-block meanwhile you can't change the inline elements.

So I think what ever the thing you have changed might be an inline-block element.

Here is a Fiddle for you!

Murshid Ahmed
  • 946
  • 5
  • 20