深入css之去除inline-block元素之間的多余間隙

caspar 發(fā)布于2019-08-30 13:47 / 852人閱讀

摘要：父容器設置優(yōu)點彈性布局可以去除多余間隙，而且可以輕松的實現(xiàn)垂直居中，水平居中等效果。缺點過低版本的瀏覽器不支持該屬性。

什么是inline-block之間的多余間隙

考慮以下代碼：


  One
  Two
  Three

nav a {
  display: inline-block; //或者inline;
  padding: 5px;
  background: red;
}

我們會得到如下結果：

誒？我們明明沒有在設置margin-right，為什么a標簽之間會有間隙？

答：產(chǎn)生的間隙來自于html代碼中標簽與標簽之間的間隙, 該間隙會根據(jù)父容器的字體大小而變化（上述示例代碼中，nav的font-size越大，該間隙越大）。

如何去除這些多余的間隙？

在明確了這些間隙產(chǎn)生的原因后，要去除這些間隙就變得容易多了，通常有以下集中辦法去除這些間隙：

1.去除html代碼中的間隙：

將代碼寫成一行：


  OneTwoThree

或者用注釋填充：


  OneTwoThree

都可以去掉這些多余間隙。

優(yōu)點：不需要通過css處理，從根本上解決問題
缺點：代碼可讀性降低，項目里寫成這樣估計會被吊起來打。

2.通過負的margin抵消多余間隙

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
  margin-right: -4px;  //增加了這一行
}

優(yōu)點：簡單
缺點：由于多余間隙的大小會受父容器的font-size大小影響，所以margin-right的值要依情況設置，不好控制。

3.父容器設置font-size:0; 內(nèi)部子元素多帶帶設置字體大小，即：

nav {
  font-size: 0; //增加了這一行
}

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
  font-size: 14px;　//增加了這一行
}

優(yōu)點：相比與設置負的margin-right大小的不確定性，設置font-size:0;顯得更加好控制。
缺點：由于font-size的可繼承性，導致其子元素都繼承font-size:0;只能重寫覆蓋。如果項目中的字體大小設置采用的是em而不是px, 那么子元素的字體大小就無法通過em來進行設置了（不管多少em都是０）。

4.父容器設置display: flex;

優(yōu)點：彈性布局可以去除多余間隙，而且可以輕松的實現(xiàn)垂直居中，水平居中等效果。
缺點：過低版本的瀏覽器不支持該屬性。

GPU云服務器云服務器 js去除多余空格 php去除數(shù)組的元素 js 去除相同的元素深入理解webrtc之a(chǎn)ec

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115540.html

深入理解-CSS內(nèi)聯(lián)元素之line-height

摘要：常見問題這一部分我們來說一說常見的內(nèi)聯(lián)元素的一些問題。通過設置為，或者使用屬性，都可以達到去除內(nèi)聯(lián)元素之間的間隙的目的。 showImg(https://segmentfault.com/img/remote/1460000014515131?w=1280&h=608); 上一篇文章我們討論了font-size，這一篇來說另一個與文字關系密切的屬性line-height。這里涉及到了內(nèi)...

wapeyang 2019-08-29 15:06 評論0 收藏0
深入理解-CSS內(nèi)聯(lián)元素之line-height

摘要：常見問題這一部分我們來說一說常見的內(nèi)聯(lián)元素的一些問題。通過設置為，或者使用屬性，都可以達到去除內(nèi)聯(lián)元素之間的間隙的目的。 showImg(https://segmentfault.com/img/remote/1460000014515131?w=1280&h=608); 上一篇文章我們討論了font-size，這一篇來說另一個與文字關系密切的屬性line-height。這里涉及到了內(nèi)...

鄒強 2019-08-02 10:15 評論0 收藏0
white-space:nowrap 的妙用

摘要：對于多個元素同在同一行的布局，如比較常見的是輪播。因此最好顯式設置的垂直方向上的對齊。做法一的案例有淘寶首頁的主輪播通過子元素浮動，父元素清除浮動。可看出這與與應用了的文本容器效果一樣。上的效果，應該也一樣。對于多個元素同在同一行的布局，如比較常見的是輪播。下面我將探討這這一布局的做法：首先約定html結果如下： div.row div.col div.col di...

qqlcbb 2019-08-30 12:55 評論0 收藏0
【整理】幾種解決inline-block間隙的方案

摘要：有基礎的朋友可以直接跳過序言，直接看方案序有幾種屬性是內(nèi)聯(lián)對象，比如標簽等，可以堆在一起顯示，寬高由內(nèi)容決定，不能設置是塊對象，比如標簽等，要占一整行，但是寬高可以自定義為了彌補和的不足，又擴充了屬性可以將對象呈遞為內(nèi)聯(lián)對象，而內(nèi)容作為 showImg(https://segmentfault.com/img/remote/1460000010989238); 有基礎的朋友可以直接跳...

array_huang 2019-08-29 13:20 評論0 收藏0