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.
<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).
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.
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.
Thank you all for your replies! I realize now my post basically contained two different questions.
Why is there a display: block; in the challenge when it also seems to work without it?
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!
