No, that’s the default display behaviour for an img; they’re inline elements (which is more obvious when we’re talking about text) so there’s a space below reserved for dangly ends of hanging letters like j, g, y, p, etc. If you want to get rid of the gap, make the img a block-level element.
The more I know, the less I know.
Dev tools shows image is inline.
Maybe codepen.io adds ‘<!DOCTYPE html>’ because if I have raw file with this doctype, then the space break happens.
The space underneath seems to be 5px – where does that come from?
Dev tools on layout shows ‘display:inline’ and ‘line-height 20px;’
Seems like if I add ‘line-height:0px;’ to the container then that tightens the wrapping (if my file has no doctype – raw html).
Next question, why does a raw file in firefox (raw file is one on my harddrive) displayed in the browser not show this space? Or this code – https://liveweave.com/VxCiyo – or
I would stick to what Beverleyh says: https://codepen.io/anon/pen/GGWqKv
See here what happens. Exactly like she mentions. Block level elements instead of inline elements.
Doesn’t drive you mad and is faster to create than reading your article :)