Forums

Give help. Get help.

  • # June 9, 2018 at 4:08 am

    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

    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.

    # June 9, 2018 at 8:16 am

    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

    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 )

    # June 10, 2018 at 11:57 pm

    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 :)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag