成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

去除inline-block元素間的間距

levius / 556人閱讀

摘要：一現(xiàn)象描述真正意義上的水平呈現(xiàn)的元素間，換行顯示或者空格隔開的情況下會有間距，這是因為瀏覽器在解析時，會將換行等讀取成一個空格導(dǎo)致。鏈接鏈接鏈接鏈接給父級設(shè)置，然后再在子元素中設(shè)置我們的字體大小，這樣也可以去掉元素間的間距。

一、現(xiàn)象描述

　　真正意義上的inline-block水平呈現(xiàn)的元素間，換行顯示或者空格隔開的情況下會有間距，這是因為瀏覽器在解析時，會將換行等讀取成一個空格導(dǎo)致。

二、移出空格的方法

　　① 我們可以去掉元素之間的換行和空格，這樣間距自然就沒有了，但是這樣會降低代碼的可讀性，不可取。

    <div>
        <a href="">
        鏈接1a><a href="">
        鏈接2a><a href="">
        鏈接3a><a href="">
        鏈接4a>
    div>

    <div>
        <a href="">鏈接1a
        ><a href="">鏈接2a
        ><a href="">鏈接3a
        ><a href="">鏈接4a>
    div>

    <div>
        <a href="">鏈接1a><a href="">鏈接2a><a href="">鏈接3a><a href="">鏈接4a>
    div>

　　② 使用margin負值，但是，由于外部的不確定因素，以及最后一個元素多出來的負margin值的問題，這個方法也不太可取。

<style>
        a {
            background: pink;
            display: inline-block; 
            padding: .5em 1em;
            margin: -3px;
        }
style>
<body>
    <div>
        <a href="">鏈接1a>
        <a href="">鏈接2a>
        <a href="">鏈接3a>
        <a href="">鏈接4a>
    div>
body>

　?、?給父級設(shè)置font-size:0，然后再在子元素中設(shè)置我們的字體大小，這樣也可以去掉元素間的間距。

<style>
        div{
            font-size: 0;
        }
        a{
            font-size: 16px;
            background: pink;
        }
style>
<div>
        <a href="">鏈接1a>
        <a href="">鏈接2a>
        <a href="">鏈接3a>
        <a href="">鏈接4a>
div>

　　④ 刪掉閉合標簽。

    <div>
        <a href="">鏈接1
        <a href="">鏈接2
        <a href="">鏈接3
        <a href="">鏈接4      
    div>

　　⑤ 使用letter-spacing。

<style>
        div{
            letter-spacing: -6px;
        }
        a{
            letter-spacing: 0;
            background: pink;
        }
style>
<div>
        <a href="">鏈接1a>
        <a href="">鏈接2a>
        <a href="">鏈接3a>
        <a href="">鏈接4a>
div>

　　⑥ 使用word-spacing。

<style>
        div{
            word-spacing: -6px;
        }
        a{
            word-spacing: 0;
            background: pink;
        }
style>
<div>
        <a href="">鏈接1a>
        <a href="">鏈接2a>
        <a href="">鏈接3a>
        <a href="">鏈接4a>
div>

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1041.html

相關(guān)文章

  • 【CSS練習】IT修真院--練習6-護工列表界面

    摘要：任務(wù)六護工列表頁完成的事情規(guī)劃任務(wù)六完成基本界面編寫計劃的事情限制最小寬度使用雪碧圖替換當前的多張圖片引入完成模擬下拉框編寫屏幕過窄時，列表項左邊文字被截斷出現(xiàn)省略號復(fù)習之前的代碼規(guī)范，優(yōu)化代碼查看驗收標準查看深度思考遇到的問題收獲頁面原生 任務(wù)六、 護工列表頁 完成的事情 1.規(guī)劃任務(wù)六2.完成基本界面編寫 計劃的事情 [x] 限制最小寬度 [x] 使用雪碧圖替換當前的多張圖片引入...

    Sleepy 評論0 收藏0

  • inline-block兼容及間隙問題

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

    learn_shifeng 評論0 收藏0

  • inline-block兼容及間隙問題

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

    binaryTree 評論0 收藏0

  • 構(gòu)建靜態(tài)頁面 之 [ 布局 ]

    摘要：布局描述表示對頁面中的顯示效果進行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內(nèi)塊級元素水平居中的第一種方法該方法需作用在父子結(jié)構(gòu)中為父級設(shè)置屬性為子級設(shè)置屬性注意的問題屬性是設(shè)置文本內(nèi)容對齊方式的 布局 描述 表示對頁面中的顯示效果進行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一種方式 水平居中 + 行內(nèi)塊級元素（text-a...

    andot 評論0 收藏0

  • 構(gòu)建靜態(tài)頁面 之 [ 布局 ]

    摘要：布局描述表示對頁面中的顯示效果進行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內(nèi)塊級元素水平居中的第一種方法該方法需作用在父子結(jié)構(gòu)中為父級設(shè)置屬性為子級設(shè)置屬性注意的問題屬性是設(shè)置文本內(nèi)容對齊方式的 布局 描述 表示對頁面中的顯示效果進行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一種方式 水平居中 + 行內(nèi)塊級元素（text-a...

    JessYanCoding 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<