June 9, 2018 at 4:08 am #272413
Seems like codepen adds some sort of space at the bottom of an image I have which is wrapped in a div.
Seems like an error. jsfiddle does it also.June 9, 2018 at 6:30 am #272414
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
imga block-level element.June 9, 2018 at 8:16 am #272425
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
June 9, 2018 at 8:25 am #272426
It hasn’t driven me mad … yet!
(am reading css: the definitive guide pg 307 )June 10, 2018 at 11:57 pm #272477
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 :)June 11, 2018 at 2:40 am #272479
You must be logged in to reply to this topic.