seitenSCHNEIDER Posted November 22, 2019 Share Posted November 22, 2019 I've made a mockup of a card style info box with an image as header which has an colored overlay with a height of 100% applied via the :after selector. Oddly enough, the overlay is a little taller than the image and I got a green fringe at the bottom of the image. Can you explain to me what the problem is? You can see me mockup here: https://codepen.io/seitenschneider/pen/MWWRbvO Any help is highly appreciated. Link to comment Share on other sites More sharing options...
Funce Posted December 2, 2019 Share Posted December 2, 2019 Hi there, the fix for this one will be to set your image to be .box .box-image img { max-width: 100%; display:block; /*New thing*/ } You won't find this very often from me, but I don't understand why this works. If someone could elaborate that would be good. Link to comment Share on other sites More sharing options...
Ingolme Posted December 2, 2019 Share Posted December 2, 2019 Images are inline by default. All inline elements are placed at the text baseline. There is always a bit of space reserved below the baseline, which is for hanging letters like "g" or "y", and you see this space below the image. In order to fix this, you can either make the image a block, or set its vertical align to "middle". 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