hariskar Posted December 15, 2016 Share Posted December 15, 2016 Why does the border on hover that appears on the 4 smaller pictures not fall exactly on the pictures edge, but at the bottom it is about 7px lower and leaves an empty space? http://www.mikroviologos.gr/test2 Thank you! Link to comment Share on other sites More sharing options...
Ingolme Posted December 15, 2016 Share Posted December 15, 2016 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: Make the image a block Set the image's vertical-align property to "middle" 1 Link to comment Share on other sites More sharing options...
hariskar Posted December 16, 2016 Author Share Posted December 16, 2016 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 More sharing options...
Ingolme Posted December 16, 2016 Share Posted December 16, 2016 Since you want the border to be covering the image, that's probably the best way to do it with an <img> element. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now