198

I've read somewhere that <img> element behaves like both. If correct, could someone please explain with examples?

Stickers
  • 75,527
  • 23
  • 147
  • 186
understack
  • 11,212
  • 24
  • 77
  • 100

10 Answers10

223

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.

DisgruntledGoat
  • 70,219
  • 68
  • 205
  • 290
  • I always read that images are inline elements, not inline-block, but it does make sense that they would be inline-block, due to the ability to add width and height. – Donato Jun 05 '15 at 18:34
  • 24
    This answer is not technically correct. Precisely speaking, `img` elements are not `inline-block` but actually `inline` elements. You can check this in a modern browser by right clicking an image, clicking "Inspect element", then viewing the computed style, which will show `display: inline`. There is no block context happening inside the tag, so it's not correct to call it `inline-block`. For more information on replaced inline elements see [Quentin's answer](http://stackoverflow.com/a/2402781/2234742) and [this MDN article](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element). – Maximillian Laumeister Dec 27 '15 at 02:27
  • @Max that link says nothing about replaced elements being inline. – DisgruntledGoat Dec 27 '15 at 02:38
  • @DisgruntledGoat The link I posted doesn't say that `img` elements are inline - Google Chrome dev tools shows `img` elements as being inline. This post is the only place I've found so far that says that they are `inline-block` instead. Interestingly, I haven't found any authority that says they are `inline` either. Is how to treat the tag implementation-dependent, maybe? – Maximillian Laumeister Dec 27 '15 at 02:54
  • 3
    @Max According to [this](http://www.w3.org/TR/CSS2/conform.html#replaced-element), replaced elements are outside the scope of the CSS formatting model. Nothing in the HTML or CSS specs specify that images are inline. So regardless of what the browser says it is, images are treated exactly like they were set to `display:inline-block`. – DisgruntledGoat Dec 28 '15 at 14:47
  • @DisgruntledGoat Thanks for the research and sorry for the fuss! That seems like it would be useful to add to your answer - I'm only asking since this answer is basically the internet authority for the default display value for `img` elements (you are at the top for many relevant google searches!) and also since as currently written, your answer and the next one contradict each other. Just trying to help make the picture more clear for other people who are coming from Google like I did. Thanks! – Maximillian Laumeister Dec 28 '15 at 17:57
  • Also, block isn't just about having a width and height. What is special about block is that there is a newline before and after the element. So inline-block would allow multiple inline elements that "share" the same new line before and after. – Justin Duncan Sep 08 '18 at 04:58
  • 0 Something interesting happens when you use "content: url(...)" instead of the src attribute. You cannot use width and height anymore, they are ignored (just like for normal inline elements). If you add "display: inline-block", the width and height work again. – cipak Jan 13 '23 at 08:28
  • the requested examples are missing – oceanGermanique Jan 19 '23 at 12:45
63

An img element is a replaced inline element.

It behaves like an inline element (because it is), but some generalizations about inline elements do not apply to img elements.

e.g.

Generalization: "Width does not apply to inline elements"

What the spec actually says: "Applies to: all elements but non-replaced inline elements, table rows, and row groups "

Since an image is a replaced inline element, it does apply.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
17

IMG elements are inline, meaning that unless they are floated they will flow horizontally with text and other inline elements.

They are "block" elements in that they have a width and a height. But they behave more like "inline-block" in that respect.

Robusto
  • 31,447
  • 8
  • 56
  • 77
7

For almost all purposes think of them as an inline element with a width set. Basically you are free to dictate how you would like images to display using CSS. I generally set a few image classes like so:

img.center {display:block;margin:0 auto;}

img.left {float:left;margin-right:10px;}

img.right  {float:right;margin-left:10px;}

img.border  {border:1px solid #333;}
Montana Flynn
  • 299
  • 1
  • 4
  • 10
3

Whenever you insert an image it just takes the width that the image has originally. You can add any other html element next to it and you will see that it will allow it. That makes image an "inline" element.

Avatar
  • 66
  • 1
0

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.

Modaser Sadat
  • 9
  • 1
-1

<img> is a replaced element; it has a display value of inline by default, but its default dimensions are defined by the embedded image's intrinsic values, like it were inline-block. You can set properties like border/border-radius, padding/margin, width, height, etc. on an image.

Replaced elements : They're elements whose contents are not affected by the current document's styles. The position of the replaced element can be affected using CSS, but not the contents of the replaced element itself.

Referenece : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

Ritu Raj Shrivastava
  • 79
  • 2
  • 7
-1

The is considered as an inline element because it allows other elements including itself too sit on the same line. It can also have some block features like styling of the width and height. But you can change it by setting the display property of the element in CSS to 'inline-block'. That is: img {display:inline-block;}

Fortunecode
  • 1
-2

behaves as an inline-block element as it allows other images in same line i.e. inline and also we can change the width and height of the image and this is the property of a block element. Hence, provide both the features of inline and block elements.

Ayushgupta
  • 1
  • 1
-3

is an inline element ..but in css you can change it simply by:- img{display:inline-block;} or img{display:inline-block;} or img{display:inliblock;}

ritik sharma
  • 1