定義：display:inline-block是使元素以塊級元素的形式呈現(xiàn)在行內(nèi)。意思就是說，讓這個(gè)元素顯示在同一行不換行，但是又可以控制高度和寬度，這相當(dāng)于內(nèi)聯(lián)元素的增強(qiáng)。

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

<div class="container">

??????<div class="left">

??????????左

??????</div>

??????<div class="right">

??????????右

??????</div>

??</div>

.container{

??width:800px;

??height:200px;

}

.left

??{

????background:red;

????dispaly:inline-block;

????width:200px;

????height:200px;

??}

.right

??{

????background:red;

????dispaly:inline-block;

????width:600px;

????height:200px;

??}

解決辦法：

父元素font-size=0 ，再向兩個(gè)子元素分別設(shè)置font-size

.container{

???????????width:800px;

???????????height:200px;

???????????font-size:0;

???????}

???????.left{

???????????font-size:14px;

???????????background:red;

???????????display: inline-block;

???????????width:200px;

???????????height:200px;

???????}

???????.right{

???????????font-size:14px;

???????????background:blue;

???????????display: inline-block;

???????????width:600px;

???????????height:200px;

???????}

轉(zhuǎn)載于:https://www.cnblogs.com/wangyawei/p/8889650.html

總結(jié)

以上是生活随笔為你收集整理的display:inline-block解决文字有间隙问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。