本篇內(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：眾前端們都知道，其作用是將對象呈遞為內(nèi)聯(lián)對象，但是對象的內(nèi)容作為塊對象呈遞。
有如下代碼
CSS Code復(fù)制內(nèi)容到剪貼板
.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è)元素之間有間隙，那么問題來了
為什么會出現(xiàn)間隙？
原因是inline-block允許空格，出現(xiàn)空隙的罪魁禍?zhǔn)拙褪前〒Q行在內(nèi)的空白符。
如何消除間隙？
對父級元素設(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é)對比
display:block
1.block元素會獨(dú)占一行，多個(gè)block元素會各自新起一行。默認(rèn)情況下，block元素寬度自動(dòng)填滿其父元素寬度。
2.block元素可以設(shè)置width,height屬性。塊級元素即使設(shè)置了寬度,仍然是獨(dú)占一行。
3.block元素可以設(shè)置margin和padding屬性。
display:inline
1.inline元素不會獨(dú)占一行，多個(gè)相鄰的行內(nèi)元素會排列在同一行里，直到一行排列不下，才會新?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不會產(chǎn)生邊距效果。
display:inline-block
簡單來說就是將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)。比如我們可以給一個(gè)link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
到此，相信大家對“inline-block帶來的元素間距問題怎么解決”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
重慶分公司
重慶分公司
