去除inline-block元素間的間距

levius 發(fā)布于2019-04-23 11:42 / 554人閱讀

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

一、現(xiàn)象描述

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

二、移出空格的方法

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

    <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負(fù)值，但是，由于外部的不確定因素，以及最后一個(gè)元素多出來(lái)的負(fù)margin值的問(wèn)題，這個(gè)方法也不太可取。

<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>

　　③ 給父級(jí)設(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>

　　④ 刪掉閉合標(biāo)簽。

    <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>