定義：display:inline-block是使元素以塊級元素的形式呈現在行內。意思就是說，讓這個元素顯示在同一行不換行，但是又可以控制高度和寬度，這相當於內聯元素的增強。

但是display:inline-block存在文字間隙問題

1. <div class="container">
2. <div class="left">
3. 左
4. </div>
5. <div class="right">
6. 右
7. </div>
8. </div>
9. .container{
10. width:800px;
11. height:200px;
12. }
13. .left
14. {
15. background:red;
16. dispaly:inline-block;
17. width:200px;
18. height:200px;
19. }
20. .right
21. {
22. background:red;
23. dispaly:inline-block;
24. width:600px;
25. height:200px;
26. }

解決辦法：

父元素font-size=0 ，再向兩個子元素分別設置font-size

1. .container{
2. width:800px;
3. height:200px;
4. font-size:0;
5. }
6. .left{
7. font-size:14px;
8. background:red;
9. display: inline-block;
10. width:200px;
11. height:200px;
12. }
13. .right{
14. font-size:14px;
15. background:blue;
16. display: inline-block;
17. width:600px;
18. height:200px;
19. }

display:inline-block解決文字有間隙問題