Image (display: block) creates spacing at the bottom

[Tosheen]

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.

[Paulie_D]

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

http://codepen.io/Paulie-D/pen/MJKBqX

[Tosheen]

Thanks, I figure that out as well.

Why the spacing appears is the question here.

[Shikkediel]

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.

[Shikkediel]

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…

[jurotek]

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

[Tosheen]

@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.

[Shikkediel]

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

[Author]

Posts