Skip to content
Submitted about 1 year ago

QR Code Component

Fabian•150
@slowjo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

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
    @JeuriMorelPosted about 1 year 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
    0
    Fabian•150
    @slowjoPosted about 1 year ago

    @JeuriMorel

    Exactly what I was looking for. Thanks!

    0
    Jeuri Morel•1,405
    @JeuriMorelPosted about 1 year 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
    1

Please log in to post a comment

Log in with GitHub

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