Tribute Page - about 'block' value of `img`

1

#help
I was working on the first Freecodecamp project. Everything worked so far; however, I am confusing with the Userstory 8 ( The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.) as follow: from the instruction I understood that the img element need to be displayed as a block element and fill the whole width so that margin: auto could be applied to centralize it so display: block. was suggested I thought flex and grid have the same effect of block with extra functionality so I tried as the result of failing the test.

So is this functionality of block different from flex, grid. I am thinking about an alternative solution for this case.

2

As long as the image is not using the default display value (or inline/inline-block) it will remove the whitespace from below the image it would otherwise have (it’s not used for centering, but the requirement for display: block was added to the same tests).

https://codepen.io/lasjorg/pen/VwvPmWL

Usually, you do not set images to be flex or grid, but the image container, which would also fix the whitespace issue.

1 Like