Jump to content

Why does the border on hover leave empty space at bottom of picture?

Recommended Posts

That HTML is kind of complicated for a simple hover border. But the reason you're seeing space below the image is because <img> is an inline element. Inline elements reserve a little but of space below them for letters with parts that go below the baseline such as "g", "y", "p".


There are two ways to fix that:

  1. Make the image a block
  2. Set the image's vertical-align property to "middle"
  • Like 1
Link to post
Share on other sites

It works with display:block!I would never find this myself...


I made the html this way, because I want the transparent non hover border and the blue hover border to be over the image edges and not around/externally of the image with the image smaller. Is there a simpler way to do this?

Thank you!

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...