Forums

  • # January 10, 2017 at 12:06 pm

    Hi,
    I am interested to know why image creates space at bottom of the parent even if display property is set to block:http://codepen.io/anon/pen/GroWxQ

    This other example has span instead of an image with the same display property and the gap is not visible: http://codepen.io/anon/pen/ZLQejE

    I know how to remove spacing between siblings inline elements but this one is new to me.

    # January 11, 2017 at 12:42 am

    I’m not entirely clear on what the issue is but

    # January 11, 2017 at 3:35 am

    Thanks, I figure that out as well.

    Why the spacing appears is the question here.

    # January 11, 2017 at 1:25 pm

    Yeah, it’s odd. If the child is an image, it’s creates an empty line underneath .item but when the child is a span no such line appears. Even if the display value is the same. Just to clarify, not offering any explanation…

    It can’t only be the child that causes this when the empty line is basically there because of .item itself having inline-block inside a block level element.

    It must be an indirect influence the child has on the .item parent in relation to it’s parent.

    # January 11, 2017 at 2:49 pm

    The only difference I see between them is that img is a (non-closing) replaced element and span isn’t. Otherwise it might be one of those things that’s written in the spec somewhere but hard to find or comprehend…

    # January 12, 2017 at 2:00 pm

    Inline block elements are affected by vertical alignment.
    If you add vertical-align:top; to .item in your first pen the problem goes away.

    # January 13, 2017 at 1:14 am

    @shikkediel It must be the correlation between the parent and the child, it just does not make sense when why first example creates empty space and second does not, at least to me. If the span example created the space as well then it would be something with the parent 100%(.item) since it has the display set to inline block and those elements treat empty spaces in the code as the space between items(letters etc) which make sense.

    @jurotek It is the solution indeed, thanks. Explanation is what interests me the most.

    # January 13, 2017 at 10:27 am

    I believe the empty line is underneath .item though, not the child itself…

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

You must be logged in to reply to this topic.

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