Why display: block is necessary for passing user story 8

Tell us what’s happening:
Why must I set the display attribute of the image to block in order to pass user story 8? It seems the page is perfectly fine without that setting.

Your project link(s)

solution: https://codepen.io/albertmcw/pen/wvJQOQY

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0

Challenge: Build a Tribute Page

Link to the challenge:

The short answer is: Because the tests demand it. There are other ways to center an image, but the tests want you to use display:block with margin:0 auto.

By the way, if you make your browser window larger than the image, you’ll see that it’s not centered anymore. That’s because margin:0 auto doesn’t work with inline or inline-block elements (an image is inline by default). It’s a good idea anyway to always set images to block, inline elements sometimes have confusing behaviour.

I think I have the answer. If I use an image with a smaller width, it is not at the center. So display: block is necessary, otherwise the margin setting does not work.

P.S. Just found jsdisco’s post after posting this one. And that one basically the same as mine. So, I choose that one as the solution. Thank jsdisco.

You’ve probably changed the default editor layout in codepen (which is panels on top, preview on bottom), so you didn’t see it right away. However I recommend that you keep that setting (panels either left or right), because that way you can easily grow/shrink the width of the preview window.
Never understood why codepen has that awkward default layout, anyway.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.