CSS Unused CSS Stages Flexbox and Multi-Column Layout Multi-Column Layout

why do we set display of img as "block"?


Essentially an inline element only occupies the space of it's bounding tags and can't be changed. A number of tags are inline by default and generally relate to text content. Block elements can be configured independently of content i.e you can make a div the full size of a page but only fill it with one word and it would still work. If you put an image in an inline element you would only see a small part of it by default if it worked at all.

1 Answer

Hi Hoppy

Personally think its a matter of choice. There are many other options. You wouldnt want to display an image as "inline"

TRY these other options and you will appreciate the use of display property:

display: none display: inline display: block display: contents display: list-item display: inline-block display: inline-table display: table display: flex display: inline-flex display: grid display: inline-grid