This topic contains 5 replies, has 4 voices, and was last updated by  Paulie_D 7 months, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #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.



    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 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 – – or



    It hasn’t driven me mad … yet!,_Tables,_and_Mysterious_Gaps

    (am reading css: the definitive guide pg 307 )



    I would stick to what Beverleyh says:
    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-link icon-logo-star icon-search icon-star