去除inline-block元素間的間距

levius 發布于2019-04-23 11:42 / 546人閱讀

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

一、現象描述

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

二、移出空格的方法

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

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

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

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

GPU云服務器云服務器 html文字間的間距 html塊內元素間距 php去除數組的元素 js 去除相同的元素

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1041.html

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

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

Sleepy 2019-08-30 15:53 評論0 收藏0
inline-block兼容及間隙問題

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

learn_shifeng 2019-08-28 18:30 評論0 收藏0
inline-block兼容及間隙問題

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

binaryTree 2019-08-01 15:01 評論0 收藏0
構建靜態頁面之 [ 布局 ]

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

andot 2019-08-29 16:31 評論0 收藏0
構建靜態頁面之 [ 布局 ]

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

JessYanCoding 2019-08-02 16:31 評論0 收藏0