为什么嵌套的内联元素和后面的字符之间没有字母间距？

Question

After reading the spec for letter-spacing, I understand that runs of atomic inlines (ex inline-block) elements are treated as a single character ( http://www.w3.org/TR/css3-text/#letter-spacing ):

For the purpose of letter-spacing, each consecutive run of atomic inlines (such as image and/or inline blocks) is treated as a single character.

In all browsers I tested (Chrome, Safari, Firefox, IE 9+10), it doesn't seem to work like this.

The following code ( http://codepen.io/caleb/pen/CqDfK ):

<style>
    div { letter-spacing: 2em; }
    em { letter-spacing: normal; }
</style>
<div>
    a<em>em</em><em>em</em>bc
</div>

is rendered like:

a    ememb    c

Is there a reason why there isn't an additional 2em of spacing between the emem and the b ? Since the emem is a single character.

Answer 1

Perhaps the spec does not seem to be fully implemented as you comment, but I am not sure. When I put in a modified version of the example from the spec (modified in that I made all inner elements em and changed sizes to see better; changes in quote below given in brackets)...

For example, given the markup

 <P>a<LS>b<Z>cd</Z><Y>ef</Y></LS>g</P> 

and the style sheet

 LS [em] { letter-spacing: 1em; } Z [em > em] { letter-spacing: 0.3em; [made 3em in example] } Y [em > em + em] { letter-spacing: 0.4em; [made 6em in example]} 

the spacing would be

 a[0]b[1em]c[0.3em]d[1em]e[0.4em]f[0]g 

...it does not render according to what they state , which implies some variation to the spec. Instead, the rule that appears to be followed is that the preceding letter's letter-spacing value determines the space that follows it. This might be an implementation based on the interpretation of this statement from the spec:

At element boundaries, the total letter spacing between two characters is given by and rendered within the innermost element that contains the boundary.

But I am not sure of that. At any rate, following what appears to be the rule the browser's are using, that the preceding letter's letter-spacing value determines the spacing, then that explains the answer to your question of

Is there a reason why there isn't an additional 2em of spacing between the emem and the b?

It is because the letter preceding the b is the m contained in a letter-spacing: normal coded element, which gives a zero width spacing after it. I don't believe the reference...

For the purpose of letter-spacing, each consecutive run of atomic inlines (such as image and/or inline blocks) is treated as a single character

...has much to do with it. That just indicates that such "atomic inlines" function as a unit, and an em is not an atomic inline by default ( see second paragraph of 9.2.2 in this spec ). So in this example , the width of the inline-block element determines where the g is placed, not the fact that the f happens to now be after the g , because the whole block is functioning as an atomic unit.