display:inline-block解决文字有间隙问题

Posted 2020-10-31 giser123

定义：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.        }