Unexplained space below span

Question

I would need to get rid of the space below the two span tags and don't understand what causes them to be there.

HTML

<div>
  <span></span><span></span>
</div>

CSS

div {
  border: 1px solid gray;
  display: inline-block;
}
span {
  width: 13px;
  height: 25px;
  display: inline-block;
}
span:not(:last-child) {
  border-right: 1px solid gray;
}

Screenshot:

https://jsfiddle.net/wjy5hxnu/

font-size:0 is a hack, use alignment like detailed in the duplicate — Temani Afif, Nov 07 '19 at 13:27
@TemaniAfif Thank you! Adding `vertical-align: middle` to the `span` worked. — M3RS, Nov 07 '19 at 13:43

score 1 · Accepted Answer · edited Nov 07 '19 at 13:25

1

You can check the updated jsfiddle here.

div {
  font-size: 0px;
}

Adding font-size: 0 to div will solve the problem and if you have to use any text inside span you can add font-size directly in the span.

edited Nov 07 '19 at 13:25

M3RS

5,619
5
29
40

answered Nov 07 '19 at 13:12

Sonia

1,839
1
11
13

score -1 · Answer 2 · answered Nov 07 '19 at 13:22

-1

div {
  border: 1px solid gray;
  display: inline-block;
  line-height: 11px;
}

Line height will lower the div to meet the line.

answered Nov 07 '19 at 13:22

spas2k

502
1
6
14

Unexplained space below span

2 Answers2