letter-spacing-203.html (2584B)
1 <!DOCTYPE html> 2 <html lang="en" > 3 <meta charset="utf-8"> 4 <title>letter-spacing at element boundaries</title> 5 <link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> 6 <link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'> 7 <link rel='match' href='reference/letter-spacing-203-ref.html'> 8 <meta name="assert" content="Letter spacing between two characters is given by their closest mutual ancestor."> 9 <style type='text/css'> 10 @import "/fonts/ahem.css"; 11 .contain { 12 font: 20px/1 Ahem; 13 border: solid blue; 14 margin: 1em; 15 float: left; } 16 .ls0 { 17 letter-spacing: 0; 18 } 19 .ls1 { 20 letter-spacing: 1em; 21 } 22 .ls3 { 23 letter-spacing: 3em; 24 } 25 .control p { 26 white-space: pre-wrap; 27 } 28 p { 29 letter-spacing: 0; 30 margin: 0; 31 word-break: break-all; 32 } 33 </style> 34 35 <div id='instructions'>Test passes if the pattern is identical in both blue boxes.</div> 36 37 <div class="contain"> 38 <!-- middle owned by containing block: simple --> 39 <p class="ls1"><span class="ls0">AAA</span><span class="ls0">BBB</span></p> 40 <p><span class="ls1">AAA</span><span class="ls1">BBB</span></p> 41 <!-- middle owned by containing block: double nesting --> 42 <p><span class="ls1"><span class="ls0">AAA</span></span><span class="ls1">BBB</span></p> 43 <p><span class="ls0"><span class="ls1">AAA</span></span><span class="ls1">BBB</span></p> 44 <!-- middle owned by inline: simple --> 45 <p><span class="ls1"><span class="ls0">AAA</span><span class="ls0">BBB</span></span></p> 46 <p><span><span class="ls1">AAA</span><span class="ls1">BBB</span></span></p> 47 <!-- middle owned by inline: double nesting --> 48 <p><span><span class="ls1"><span class="ls0">AAA</span></span><span class="ls1">BBB</span></span></p> 49 <p><span class="ls3"><span class="ls0"><span class="ls1">AAA</span></span><span class="ls1">BBB</span></span></p> 50 <!-- middle containing space --> 51 <p class="ls1"><span class="ls0">AAA</span> <span class="ls0">BBB</span></p> 52 <p><span class="ls3"><span class="ls1"><span class="ls0">AAA</span> </span><span class="ls1">BBB</span></span></p> 53 </div> 54 55 <div class="contain control"> 56 <!-- middle owned by containing block: simple --> 57 <p>AAA BBB</p> 58 <p>A A AB B B</p> 59 <!-- middle owned by containing block: double nesting --> 60 <p>AAAB B B</p> 61 <p>A A AB B B</p> 62 <!-- middle owned by inline: simple --> 63 <p>AAA BBB</p> 64 <p>A A AB B B</p> 65 <!-- middle owned by inline: double nesting --> 66 <p>AAAB B B</p> 67 <p>A A A B B B</p> 68 <!-- middle containing space --> 69 <p>AAA BBB</p> 70 <p>AAA B B B</p> 71 </div>