Submitted 7 months ago

QR Code Component

Fabian• 150

@slowjo

Preview site View code

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Unexpected extra space below images

I have noticed this in another project as well, there seems to sometimes be a few pixels extra space below images (more than you specify using margins and padding). For example, the qr image here is originally 576 x 576. But when it gets constrained here to a container with a width of 288px, it's height in the browser is 292px. I just took 4px off the bottom margin to take this into account, is there a more generally applicable way to deal with this?

Community feedback

Jeuri Morel• 1,405

@JeuriMorel

Posted 7 months ago

The most common ways to solve that issue, as far as I know, is to add either of the following to your images:

display: block;
vertical-align: middle; (I think any value here works.)

Great job on the solution by the way.

Marked as helpful

Fabian• 150

@slowjo

Posted 7 months ago

@JeuriMorel

Exactly what I was looking for. Thanks!

Jeuri Morel• 1,405

@JeuriMorel

Posted 7 months ago

@slowjo

You're welcome. I usually include the following in the CSS resets:

img,
svg {
    max-width: 100%;
    display: block;
}

It makes working with images a lot easier.

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord