Make an Image Responsive - why is display block necessary?

Tell us what’s happening:
The challenge tells me to set the image to display:block; and I wonder why this is needed; when I try to leave the display rule out, or explicitly set display:inline; the visual output seems to have the same effect: when I make the output window narrow, the image scales with it.

I thought height (or width) rules would not work on inline elements, but I don’t see it failing in this case. Are images a special kind of inline elements somehow? The more I read about this now, the more I get confused.

I know I can just use display:block; there to pass the test, but I would like to understand if/when/why it is needed. Could anyone shine a light on this perhaps?

Your code so far


<style>
  img {
    max-width:100%;
    height: auto;
    display:inline; /* This should be block, according to the test. But why? */
  }  
</style>

<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/make-an-image-responsive

1 Like

As I know the display: block; get all the place what is possible! And display: inline; used for text write as is not take up all space!

In the meantime I found

I don’t really understand it, but it is enough for me right now to know not all inline elements are equal in this respect.

Thanks @bestdesign for your reply. I think images have a display of inline by default.

1 Like

It’s not about responsiveness, but it’s use to get rid of the white space.
https://codepen.io/anon/pen/gNeoQE

No, width & height work fine on inline / inline-block elements.

To make an image not overflow you use max-width: 100%, not display: block.

That is not true.
https://codepen.io/anon/pen/NZYMEK

Images are technically inline, but there are some rules that apply to them which gives them behavior like inline-block elements.

Styling with CSS

<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. You can set properties like border/border-radius, padding/margin, width/height, etc. on an image.

Often however it is a good idea to set images to display: block; so that you have maximum control over the styling (e.g. margin: 0 auto doesn’t work on inline images, and it is easier to place images in context with surrounding elements when they are block-level).

Oh, sorry. I very rarely use inline, yet i use inline-block all the time.

It’s no problem.

It’s kind of rare that you set block level elements to inline. But you do use inline elements all the time, like <a> tags and it’s good to know what you can and can not do with them. For example, if you made a button using an <a> element and wanted to give it a width and height, you can use padding, or set it to be inline-block and give it width and height.

Which would only be needed when the image is in a container and you want the container to be the same height of the image. I suppose in this challenge that is not the case, so the display: block; would not be needed there. It is a good point you make, though, this has hit me when I made a logo image in a block-display-ed hyperlink and the hyperlink turned up higher than the logo image. It took me quite a while to find out that the fix was to give the image a block display as well. :wink:

It’s just some basic styles that are good to put on images.

Just like you might remove the default margin and padding from all <ul> elements as part of your base styles. Or removing all margin and padding from all element using the universal selector reset.

* {
  margin: 0;
  padding: 0;
}

Thank you all for your replies! I realize now my post basically contained two different questions.

  1. Why is there a display: block; in the challenge when it also seems to work without it?
  2. How can it work without it, when I thought inline elements (like img) can not be given a height or width?

@lasjorg answered both questions, but since they are in two different replies (answer to 1. and answer to 2.), I will mark the answer to the first question as the ‘solution’ to my post. Along with my sincere thanks!

Cheers,
sandrab

You are most welcome, happy to help.