- This topic is empty.
January 10, 2017 at 12:06 pm #249893
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 #249910Paulie_DMember
I’m not entirely clear on what the issue is butJanuary 11, 2017 at 3:35 am #249912
Thanks, I figure that out as well.
Why the spacing appears is the question here.January 11, 2017 at 1:25 pm #249925
Yeah, it’s odd. If the child is an image, it’s creates an empty line underneath
.itembut when the child is a
spanno 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
inline-blockinside a block level element.
It must be an indirect influence the child has on the
.itemparent in relation to it’s parent.January 11, 2017 at 2:49 pm #249929
The only difference I see between them is that
imgis a (non-closing) replaced element and
spanisn’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 #249970jurotekParticipant
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 #249976
@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 #250013
I believe the empty line is underneath
.itemthough, not the child itself…
- The forum ‘CSS’ is closed to new topics and replies.