成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

caspar / 864人閱讀

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

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

考慮以下代碼：

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

我們會(huì)得到如下結(jié)果：

誒？我們明明沒有在設(shè)置margin-right，為什么a標(biāo)簽之間會(huì)有間隙？

答： 產(chǎn)生的間隙來自于html代碼中標(biāo)簽與標(biāo)簽之間的間隙, 該間隙會(huì)根據(jù)父容器的字體大小而變化（上述示例代碼中，nav的font-size越大，該間隙越大）。
如何去除這些多余的間隙？

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

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

將代碼寫成一行：

或者用注釋填充：

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

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

2.通過負(fù)的margin抵消多余間隙

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

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

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

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

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

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

4.父容器設(shè)置display: flex;

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115540.html

相關(guān)文章

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

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

    wapeyang 評(píng)論0 收藏0

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

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

    鄒強(qiáng) 評(píng)論0 收藏0

  • white-space:nowrap 的妙用

    摘要：對(duì)于多個(gè)元素同在同一行的布局，如比較常見的是輪播。因此最好顯式設(shè)置的垂直方向上的對(duì)齊。做法一的案例有淘寶首頁的主輪播通過子元素浮動(dòng)，父元素清除浮動(dòng)?？煽闯鲞@與與應(yīng)用了的文本容器效果一樣。上的效果，應(yīng)該也一樣。 對(duì)于多個(gè)元素同在同一行的布局，如比較常見的是輪播。下面我將探討這這一布局的做法： 首先約定html結(jié)果如下： div.row div.col div.col di...

    qqlcbb 評(píng)論0 收藏0

  • 【整理】幾種解決inline-block間隙的方案

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

    array_huang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<