標籤：auto 解決 strong oct lock container 左右 題解 isp
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天：移動端：空白字元問題解決辦法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
