inline-block元素間隙處理

hightopo 發布于2019-04-23 13:09 / 1756人閱讀

摘要：要使多個塊級元素并行顯示，可使用或者進行處理使用會出現元素之間的間隙我是一個我是一個我是一個我是一個如圖間隙是由換行或者回車導致的，所以將標簽代碼都寫同一行即可解決。如圖注釋如需對低版本兼容還得進一步處理

要使多個塊級元素并行顯示，可使用float或者inline-block進行處理

使用inline-block會出現元素之間的間隙

<div class="demo">
    <p>我是一個spanp>
    <p>我是一個spanp>
    <p>我是一個spanp>
    <p>我是一個spanp>
div>

.demo span{
    background:#ffffd;
    display:inline-block;
}

如圖：

*間隙是由換行或者回車導致的，所以將標簽代碼都寫同一行即可解決。不過這個方法不靠譜，因為space是由換行或回車所產生空白符所致，所以在其父元素設置font-size：0，如元素內有文字標簽需重寫font-size。

.demo{
    font-size:0;
}
.demo span{
    background:#ffffd;
    display:inline-block;
    font-size:14px;
}

?如圖：

注釋：如需對低版本兼容還得進一步處理

GPU云服務器云服務器 inline-block 最大間隙間隙圖片有間隙

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

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

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

摘要：父容器設置優點彈性布局可以去除多余間隙，而且可以輕松的實現垂直居中，水平居中等效果。缺點過低版本的瀏覽器不支持該屬性。什么是inline-block之間的多余間隙考慮以下代碼： One Two Three nav a { display: inline-block; //或者inline; padding: 5px; background: red; }...

caspar 2019-08-30 13:47 評論0 收藏0
inline-block兼容及間隙問題

摘要：一兼容性不識別但可以觸發塊元素，其它主流瀏覽器均支持。兩個要先后放在兩個樣式聲明中才有效果直接設置，使用觸發。一、兼容性： 1. IE6、IE7不識別inline-block但可以觸發塊元素，其它主流瀏覽器均支持inline-block。注：在行內元素上使用display:inline-block,IE6、7與其他瀏覽器效果一致原因分析：使用inline-block屬性在IE下會...

learn_shifeng 2019-08-28 18:30 評論0 收藏0
inline-block兼容及間隙問題

摘要：一兼容性不識別但可以觸發塊元素，其它主流瀏覽器均支持。兩個要先后放在兩個樣式聲明中才有效果直接設置，使用觸發。一、兼容性： 1. IE6、IE7不識別inline-block但可以觸發塊元素，其它主流瀏覽器均支持inline-block。注：在行內元素上使用display:inline-block,IE6、7與其他瀏覽器效果一致原因分析：使用inline-block屬性在IE下會...

binaryTree 2019-08-01 15:01 評論0 收藏0
「前端早讀君008」新手必踩坑之display: inline-block

摘要：中線基線頂線底線中線基線頂線底線是文本的幾個基本線，其對應位置如下圖基線小寫英文字母的下端沿。中線小寫英文字母的中間。將元素的基線與其父元素的下標基線對齊。將元素的基線對準給定長度高于其父元素的基線。今日勵志語往日不可追，來日猶可期，祝大家2019年繼往開來迷之間隙我們創建一個導航列表，并將其列表 item 設置為 inline-block，主要代碼如下：我我 ...

sevi_stuo 2019-08-30 15:55 評論0 收藏0