Space above and below inline content

Question

What is the space above and below inline content?

Visible Here:
http://jsbin.com/vertical-spacing-weirdness/

you can see in white an area that is between the div/table and the span; yet the span has no padding or margin.

Interestingly, this space goes away when using a transitional doctype:
http://jsbin.com/vertical-spacing-weirdness/2/

---

Something to note, in Firefox, the space appears in Transitional when you use a pixel font-size value that is divisible by 4 (4px,16px,20px, etc.).

Edit- Solved / Why

Alright, so it turns out that the issue here is that the font-size is not the same between the parent (div or table) and child (span). The strict doctype styling makes more sense because the div height would need to change anyway to accommodate any text in the div but not in the span. So in both the following examples the div will be the same height:

<div>text<span>...</span></div>

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

With transitional styling, the div is only as large as it has to be and in the second example it will only be tall enough to match the font-size of the span since there are no characters the size of the divs font-size.

The Firefox glitch on font-sizes multiples of 4 is still weird though.

(Tested on 23.0.1 & nightly: 26.0a1 (2013-08-31))

---

I don't know if I explained clearly enough, please ask if you need clarification.

Answer 1

Apply the font-size on parent instead of span it self, sample > div div {font-size:13px;}

Answer 2

Correct following css in your css file.

span {
    background: none repeat scroll 0 0 #9999FF;
    display: inline-block;
    font-size: 13px;
}

For this url http://jsbin.com/vertical-spacing-weirdness change the following CSS

table {
    border-spacing: 0;
    display: block;
    font-size: 13px;
}
span {
    background: none repeat scroll 0 0 #9999FF;
    display: inline-block;
}