Jump to content

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


hariskar

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 comment
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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...