inline-block帶來的元素間距問題怎么解決

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

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

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

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

<div class="ac-btn">
<a href="#" class="btn-save"></a>
<a href="#" class="btn-print"></a>
</div>
.ac-btn a{background:url(../img/action.png) no-repeat;width:73px;height: 25px;display: inline-block;}
.ac-btn .btn-save{background-position: 0 0;}
.ac-btn .btn-print{background-position: -73px 0;}

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

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

原因是inline-block允許空格，出現(xiàn)空隙的罪魁禍?zhǔn)拙褪前〒Q行在內(nèi)的空白符。
如何消除間隙？

對(duì)父級(jí)元素設(shè)置font-size:0

即上述CSS代碼改為

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

.ac-btn {font-size:0;}
.ac-btn a{background:url(../img/action.png) no-repeat;width:73px;height: 25px;display: inline-block;}
.ac-btn .btn-save{background-position: 0 0;}
.ac-btn .btn-print{background-position: -73px 0;}

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

display:block
1.block元素會(huì)獨(dú)占一行，多個(gè)block元素會(huì)各自新起一行。默認(rèn)情況下，block元素寬度自動(dòng)填滿其父元素寬度。
2.block元素可以設(shè)置width,height屬性。塊級(jí)元素即使設(shè)置了寬度,仍然是獨(dú)占一行。
3.block元素可以設(shè)置margin和padding屬性。

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

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

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

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

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

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

猜你還喜歡下面的內(nèi)容