Tribute page pass/no pass

Hello I’m curious why if my
image has the {display: block} property it suddenly becomes responsive. To me it looks the same with or without the display: block property. It’s still responsive without it!

Plus It shouldn’t matter if it’s block or inline since the next element is div - which is a block element. So they will never be on the same line together even if the screen gets huge.

Does anybody know why?

here’s the link to my property page:

by default it has a value display: block so you add it or not it will look same

display: block; is the default value of every thing on a web page

Well, no, some elements are block and some are inline by default.

Images are inline, which means that they cannot be centered with margin:0 auto, you’d have to use text-align: center instead.

@rlanewzeal There’s a lot of ways to center elements with CSS, so normally you could choose what works best, but in this particular case, the tests look for an image centered with margin:0 auto.

1 Like

:open_mouth: I didn’t know that

no I added that display: block value

I have added

text-align: center

value to the div containing the image like below:

#img-div {

background-color: #fff;

text-align: center;

padding: 10px;

padding-bottom: 5px;

margin: 15px;

}

but I still need to have the display:block which makes me confused.

Don’t think too much about it. As long as you can visually center an element, you have all the skills you need. For the tests, they specifically check your code to see if you have set the img to display:block. If not, the test fails, that’s really it. When you create your own pages, nobody cares about how you center an image, as long as it looks centered.

1 Like

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