Image with border in corners - space below img

Question

I want to create image with the border in opposite corners (using :: after and :: before). I almost got it, BUT the image doesn't cover the whole space in the div. Below the image there is some empty space (marked red in jsfiddle), and I don't understand what is the reason. The most important thing is that the image's height change the width. Could you explain me what I did wrong? :)

This is my code: https://jsfiddle.net/ndy79hvo/1/

score 1 · Accepted Answer · answered Nov 15 '20 at 00:51

1

This is due to the default baseline vertical alignment for images, which leaves some empty space below that baseline (where the descenders of letters like j, p, y would go). Add display: block; to the CSS rule for your image to change this.

https://jsfiddle.net/tpqzr3w2/

answered Nov 15 '20 at 00:51

Johannes

59,058
16
59
114

1

@dippas: among other reasons: because it's faster and it helps immediately – Johannes Nov 15 '20 at 00:59
the duplicate exists for some reason, This looks like a rep farm. – dippas Nov 15 '20 at 01:00
what's a rep farm? – Johannes Nov 15 '20 at 01:01
OMFG... I just delete this question for few minutes... @Johannes thank you you are very kind and helpfull. – sqtr Nov 15 '20 at 01:01
https://meta.stackexchange.com/questions/126987/what-is-rep-farming – dippas Nov 15 '20 at 01:02
@dippas I hope you get moderator rule soon :D – sqtr Nov 15 '20 at 01:03

Image with border in corners - space below img

1 Answers1