Looking to hire developers?
Been a while since my last submission so thought I'd start with this new one.
Can someone please explain why my .imageContainer class has a height of 306px which causes the extension at the bottom when hovering over the image? As far as I'm aware the height of this div should be that of its contents? The largest element inside this div is the image, so why is there this extension at the bottom?
@BenjaDotMin
Posted
Heya Chris,
Add: .imageContainer .mainImage{display:block;} to your css, and this should fix your issue :)
Images are display inline by default, so it always causes some weirdness with vertical spacing, as the box model doesn't tend to support top/bottom with inline elements.
Marked as helpful
@Chris94Lee
Posted
@BenjaDotMin That worked, thanks a lot!
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
