Is ≪Img≫ Element Block Level or Inline Level

Is img element block level or inline level?

It's true, they are both - or more precisely, they are "inline block" elements. This means that they flow inline like text, but also have a width and height like block elements.

In CSS, you can set an element to display: inline-block to make it replicate the behaviour of images*.

Images and objects are also known as "replaced" elements, since they do not have content per se, the element is essentially replaced by binary data.

* Note that browsers technically use display: inline (as seen in the developer tools) but they are giving special treatment to images. They still follow all traits of inline-block.

Why img takes a height when it's an inline element?

<img> tag is not strictly an inline element, but a inline-replaced element.

In a nutshell, it means that <img> (and other elements, as <video> or, <object> if you still use it), has intrinsic dimensions. So CSS can handle those dimensions (and other properties, such as margins). Because <img> is an inline tag, that is replaced by its own source file (well, it's still an inline element).

Some doc about that :

https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
http://www.w3.org/TR/REC-html40/struct/objects.html#edef-IMG

Funny fact (I guess) : you can't override (or simply handle) inline-replaced behavior to "normal" inline behavior on those elements with CSS (when it works when you set it to inline-block or block or whatever you want). See this example : http://jsfiddle.net/s8apbbof/

Why is a block level element higher than the image it contains?

Image is inline level element thus it adheres to the line-height setting and it's being set at the baseline of the text by default.

If you will set the image to have vertical-align: bottom it will position the image at the descent line (very bottom of text line)

The other option is to set the image to display: block and skip all this inline gimmick

Why does image use display: inline but behaves like an inline-block element

The default browser stylesheets were initially created using CSS1 for HTML3.2, so inline-block was not available or necessary. There's no difference between them for image elements.

References

CSS 1 Specification
HTML 3.2 Specification

Why is block level element contained inside inline-block level element displayed as inline?

There's no place for your span element to take the entire width of the page. Technically, you are rendering a block level element inside an inline block element. So your block level element does take 100% of the parent width.

Since there is no width defined for the parent inline-block, it takes whatever space it gets inside the inline-block element. To demonstrate this, if I assign some width to the inline-block element of yours, the span will take all the available width of the parent element.

a {
  display: inline-block;
  padding: 1em 7em;
  width: 400px; /* define some width here to the parent */
  background-color: green;
}

span {  background-color: red;  display: block;}a{  display: inline-block;  padding: 1em 7em;  width: 400px;  background-color: green;}

<a>  <span> close </span></a>

Why img element doesn't let text wrapped around it when it's inline-block element?

Inline and inline-block elements render on the same line (imagine lines of text in the book for example). And since img is inline-block element, it renders on the same line as the text next to it. So what you see in your example are three lines. First one contains image and text, the other two only contain text.

However two things happen here:

Inline-block also has height (by definition), which makes the first line higher.
All the elements in the line are (by default) vertically aligned to the bottom. That is why the text in the first line is aligned with lower border of the image.

In case you add float to the image, the concept of line is broken, which lets the subsequent content floating around.

Why can input elements be sized if they are inline elements?

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

Is ≪Img≫ Element Block Level or Inline Level