本篇內(nèi)容主要講解“inline-block帶來的元素間距問題怎么解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“inline-block帶來的元素間距問題怎么解決”吧!

創(chuàng)新互聯(lián)公司是一家專注于成都做網(wǎng)站、成都網(wǎng)站制作與策劃設計,安岳網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設10年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:安岳等地區(qū)。安岳做網(wǎng)站價格咨詢:13518219792

display:inline-block：眾前端們都知道，其作用是將對象呈遞為內(nèi)聯(lián)對象，但是對象的內(nèi)容作為塊對象呈遞。
有如下代碼
 

CSS Code復制內(nèi)容到剪貼板

1. <div class="ac-btn">   

2.                                         <a href="#" class="btn-save"></a>   

3.                                         <a href="#" class="btn-print"></a>   

4.                                     </div>   

5.     

6. .ac-btn a{background:url(../img/action.png) no-repeat;width:73px;height: 25px;display: inline-block;}   

7. .ac-btn .btn-save{background-position: 0 0;}   

8. .ac-btn .btn-print{background-position: -73px 0;}  

這樣呈現(xiàn)的如下

2個元素之間有間隙，那么問題來了
為什么會出現(xiàn)間隙？

原因是inline-block允許空格，出現(xiàn)空隙的罪魁禍首就是包括換行在內(nèi)的空白符。
如何消除間隙？

對父級元素設置font-size:0

即上述CSS代碼改為
 

CSS Code復制內(nèi)容到剪貼板

1. .ac-btn {font-size:0;}   

2. .ac-btn a{background:url(../img/action.png) no-repeat;width:73px;height: 25px;display: inline-block;}   

3. .ac-btn .btn-save{background-position: 0 0;}   

4. .ac-btn .btn-print{background-position: -73px 0;}  

block，inline和inlinke-block細節(jié)對比

display:block
1.block元素會獨占一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度。
2.block元素可以設置width,height屬性。塊級元素即使設置了寬度,仍然是獨占一行。
3.block元素可以設置margin和padding屬性。

display:inline
1.inline元素不會獨占一行，多個相鄰的行內(nèi)元素會排列在同一行里，直到一行排列不下，才會新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。
2.inline元素設置width,height屬性無效。
3.inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產(chǎn)生邊距效果。

display:inline-block
簡單來說就是將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。

到此，相信大家對“inline-block帶來的元素間距問題怎么解決”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！

分享文章：inline-block帶來的元素間距問題怎么解決
鏈接URL：http://chinadenli.net/article4/ihcpie.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、App開發(fā)、網(wǎng)站維護、網(wǎng)站建設、小程序開發(fā)、移動網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)