- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘Design’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Seems like codepen adds some sort of space at the bottom of an image I have which is wrapped in a div.
https://codepen.io/joeKingtheThird/pen/ZRBzEw
Seems like an error. jsfiddle does it also.
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
http://plnkr.co/edit/aUxXKvLLaR4nPX4jO4Uy?p=preview
It hasn’t driven me mad … yet!
https://developer.mozilla.org/en-US/docs/Archive/Misc_top_level/Images,_Tables,_and_Mysterious_Gaps
(am reading css: the definitive guide pg 307 )
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 :)