<a> wrapping an image extends below the image
I'm obviously not understanding something fundamental here, but the anchor tag that wraps each image in the following grid is adding height to each containing div:
https://codepen.io/adamantonio/pen/PovNLYE?editors=1100
This means that the scale effect on hover pushes the image out of the grid at the bottom only. I can see in the dev tools that the <a> is positioned towards the bottom of each <div> and has a "height" that extends below the image by a few pixels (see attachment).
I'm interested both in how to fix it, but why this is the default behaviour.
8 Replies
I'm guessing that if you move your
:hover effect onto your .photo (and then your transition as well) you'll probably get what you're looking for.
a tags are display: inline; by default changing to block will make it cover the whole <img> the way you are probably expecting it to.I did think of that (I also dispensed with the inner div altogether and made the a tags the grid items). As you can see in the screenshot, the a tag now covers the full image but still extends those few pixels below it.
that is something images have as default, to remove it you can add a display block, flex or grid to the imgs elements https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image
Stack Overflow
Image inside div has extra space below the image
Why in the following code the height of the div is bigger than the height of the img ? There is a gap below the image, but it doesn't seems to be a padding/margin.
What is the gap or extra space ...
Thanks for the help, I found that thread too but none of those solutions seem to work. Setting the image to display block doesn't change anything - as the two screenshots of the dev tools show, it's the <a> element that extends below the image. The image then scales into this extra space, which is what I'm trying to avoid.
it looks to me like you have fixed it on your codepen link at least. i was wondering if it was the default stretch behaviour of the grid without any 'x-items' property if it wasnt the display block/object-fit on the image. what fixed it?
The codepen still has the issue for me (latest version of Chrome on windows) so no fix yet!
I just edited the codepen and put a thick border around the outside - this really highlights the extra space at the bottom of each image.
Ah, dang it... it was just display block on the images. I think I was focused on adjusting the the <a> element.
ah im glad it was fixed. hmm curious, when i went into the dev tools there was no extra space. Yes adding borders/outlines/backgrounds on elements can really help with visualizing! I like to use outlines vs borders as borders count as spacing in the element so it adjusts the layout to make room for the border where as outlines (as well as box-shadows) dont take up space. SO helpful for debugging! As well as dev tools which also just highlights the element on hover!
Exactly - that's why i thought it was the <a> tag - because of the highlighted element in my snippets.