第125天：移動端：空白字符問題解決辦法
阿新 • • 發佈：2017-12-26
meta set idt tro contain nta 之間 空白字符 body
1、當我們想使用百分比來進行兩個盒子的並排
代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 html, 7 body { 8 margin: 0; 9 padding: 0; 10 } 11 12 .container { 13 width: 1024px; 14 height: 2000px; 15 margin: 0 auto; 16 } 17 18 .container > div { 19 display: inline-block; 20 } 21 22 .left { 23 width: 80%; 24 height: 100%; 25 background-color: #ff0; 26 } 27 28 .right { 29 width: 20%; 30 height: 100%; 31 background-color: #00f; 32 } 33 </style> 34 </head> 35 36 <body> 37 <div class="container"> 38 <div class="left"></div> 39 <div class="right"></div> 40 </div> 41 </body> 42 </html>
當我們想通過inline-block讓兩個div來並排，一個戰父盒子的80%，一個占20%。可能看起來剛好100%，但是會由於代碼中左右兩個盒子之間的空白字符會導致右邊的盒子掉下來。
2、解決辦法
（1）消除空白字符
讓左右兩個盒子的代碼緊密連起來，就是不要讓他們中間有空白字符
（2）給父盒子添加屬性font-size:0;來消除空白字符，推薦使用此方法
3、字母間距和單詞間距
字母間距——letter-spacing
單詞間距——word-spacing
第125天：移動端：空白字符問題解決辦法