国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css去除inline-block間隙

ad6623 / 1290人閱讀

摘要：先問(wèn)為什么的元素會(huì)存在間隙參考上的一個(gè)答案去除方法除空格和換行測(cè)試測(cè)試測(cè)試也可以更改成這樣測(cè)試測(cè)試測(cè)試使用設(shè)置負(fù)邊距此方法不靠譜，在不同的瀏覽器下空格的大小并不統(tǒng)一，無(wú)法一次性解決問(wèn)題火狐極速使用在父級(jí)元素上設(shè)置為，在元素上

先問(wèn)為什么display:inline-block的元素會(huì)存在間隙？ 參考o(jì)verstackflow上的一個(gè)答案

This is exactly what they should do.Spaces between inline elements are no different from spaces between words.If you don"t want that, use block elements, or set the font size to zero.
去除方法 1.除空格和換行 
    測(cè)試測(cè)試測(cè)試

也可以更改成這樣

    測(cè)試測(cè)試測(cè)試
2.使用margin-right設(shè)置負(fù)邊距

此方法不靠譜，在不同的瀏覽器下空格的大小并不統(tǒng)一，無(wú)法一次性解決問(wèn)題

    span{
           display: inline-block;
           margin-right: -4px;
           color: white;
           background-color: black;
       }
火狐(Gecko)

360極速(Blink)

Chorme(Blink)

3.使用font-size：0

在父級(jí)元素上設(shè)置font-size為0，在元素上設(shè)置實(shí)際需要得font-size即可

div{
    font-size: 0;
}
span{
    display: inline-block;
    font-size: 16px;
}



    測(cè)試
    測(cè)試
4.使用letter-spacing

給父級(jí)元素設(shè)置一個(gè)較大在負(fù)值，在元素上將letter-spacing歸0。


    測(cè)試
    測(cè)試


div{
   letter-spacing: -20px;
}
span{
    display: inline-block;
    letter-spacing: 0;
}

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

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

相關(guān)文章

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

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

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

  • css去除inline-block間隙

    摘要：先問(wèn)為什么的元素會(huì)存在間隙參考上的一個(gè)答案去除方法除空格和換行測(cè)試測(cè)試測(cè)試也可以更改成這樣測(cè)試測(cè)試測(cè)試使用設(shè)置負(fù)邊距此方法不靠譜，在不同的瀏覽器下空格的大小并不統(tǒng)一，無(wú)法一次性解決問(wèn)題火狐極速使用在父級(jí)元素上設(shè)置為，在元素上 先問(wèn)為什么display:inline-block的元素會(huì)存在間隙？ 參考o(jì)verstackflow上的一個(gè)答案 This is exactly what the...

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

  • inline-block兼容及間隙問(wèn)題

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

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

  • inline-block兼容及間隙問(wèn)題

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

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

  • white-space:nowrap 的妙用

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

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

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

0條評(píng)論

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