去除inline-block元素间间距的方法

太过爱你忘了你带给我的痛 2024-04-17 22:05 62阅读 0赞

### 目录： ###

*  一、现象描述
 *  二、解决方法
 *   *   *  方法1：各元素间不留任何空格
         *  方法2：使用margin负值
         *  方法3：在父元素上设置font-size:0
         *  方法4：使用letter-spacing或者word-spacing

# 一、现象描述 #

inline-block是一个块状行盒，表现为一个行内元素，它既拥有了块状元素可以设置width和height的特性，又保留了行内元素不换行的特点。 而当我们去使用它时候会发现各元素之间会产生一些缝隙，这些缝隙其实并非由linline-block这个属性引起的 ，而是由标签段间的空格引起。

不过，这类间距有时会对我们布局，或是兼容性处理产生影响，需要去掉它，该怎么办呢？以下展示4种方法（欢迎补充）！

<style>
        a {
            background: red;
            display: inline-block;
            padding: 5px;
        }
    </style>
    <body>
    <div>
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <a href="#">链接4</a>
    </div>
    </body>

![在这里插入图片描述][20190902071915140.png]

# 二、解决方法 #

### 方法1：各元素间不留任何空格 ###

既然引起缝隙真正的原因是标签段间的空格引起，我们可以去除之间的空格，以解决产生缝隙的问题

<style>
        a {
            background: red;
            display: inline-block;
            padding: 5px;
        }
    </style>
    <body>
    <div>
        <a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a><a href="#">链接4</a>
    </div>

![在这里插入图片描述][20190902072120506.png]

可以看到问题虽然得到了解决，但这严重牺牲了可读性 ，让代码不好维护， 显然连成一行的写法是不可取的，我们也可以把空格进行注释可以得到解决：

<style>
        a {
            background: red;
            display: inline-block;
            padding: 5px;
        }
    </style>
    <body>
    <div>
        <a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a><a href="#">链接4</a>
    </div>

当然，这种方法我们并不怎么推荐。

### 方法2：使用margin负值 ###

可以利用inline-block的灵活性，给它们设置一个负边距，隐藏空白 ，margin负值的大小与上下文字体和文字大小有关。

<style>
        a {
            background: red;
            display: inline-block;
            padding: 5px;
            margin-left: -5px;
        }
    </style>
    <body>
    <div>
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <a href="#">链接4</a>
    </div>

### 方法3：在父元素上设置font-size:0 ###

<style>
        div {
            font-size: 0;
        }
        a {
            display: inline-block;
            font-size: 16px;
            background: red;
        }
    </style>
    <body>
    <div>
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <a href="#">链接4</a>
    </div>

### 方法4：使用letter-spacing或者word-spacing ###

字符间距(letter-spacing)

<style>
        div {
            letter-spacing: -6px;
        }
        a {
            letter-spacing: 0;
            display: inline-block;
            font-size: 16px;
            background: red;
        }
    </style>
    <body>
    <div>
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <a href="#">链接4</a>
    </div>

一个是单词间距(word-spacing)：

<style>
        div {
            word-spacing : -6px;
        }
        a {
            word-spacing: 0;
            display: inline-block;
            font-size: 16px;
            background: red;
        }
    </style>
    <body>
    <div>
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <a href="#">链接4</a>
    </div>

[20190902071915140.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/ae34b1eeb20b4f9e90a61c9a10b8073a.png
[20190902072120506.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/b8c40c5facfe4302a3e53e29b92c0df4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，62人围观）

还没有评论，来说两句吧...

相关阅读

相关去除inline-block元素间间距的方法

目录： * 一、现象描述 * 二、解决方法 * * * 方法1：各元素间不留任何空格 * 方法2：使用margin负值 ...

太过爱你忘了你带给我的痛/ 2024年04月17日 22:05/ 0 赞/ 63 阅读

相关去除 inline-block 之间的间距

正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子： <input /> <input type="subm...

朱雀/ 2024年04月17日 05:34/ 0 赞/ 66 阅读

相关 docx行间距怎么设置_Word行间距怎么调？Word调行间距的方法

办公软件对于有的人来说，天天都有在使用它，使用这个对大家来说是很熟悉不过了。我们在使用Word 文档保存文字时，因某个段落太长，影响了美观，这时我们可以通过调整行间距来将此段落

墨蓝/ 2022年12月31日 10:20/ 0 赞/ 26 阅读

相关 HashSet实现去除重复元素

hello，大家好！又来给大家分享干货了！关于HashSet实现去除重复元素。首先，HashSet当中有自己封装了add方法： public boolean add(

Bertha 。/ 2022年12月20日 12:40/ 0 赞/ 192 阅读

相关去除inline-block元素间间距的N种方法

原文：http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99

太过爱你忘了你带给我的痛/ 2022年09月25日 15:27/ 0 赞/ 156 阅读

相关去除inline-block元素间间距的几种方法

常见的inline-block元素：img input 1、现象描述真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距如：

阳光穿透心脏的1/2处/ 2022年06月09日 13:47/ 0 赞/ 149 阅读

相关去除inline-block元素间间距最快最简单方法

![70][] [70]: /images/20220528/1338aad48e484e33a4ff47110c1aa538.png

冷不防/ 2022年05月28日 08:05/ 0 赞/ 185 阅读

相关去除inline-block元素间间距的N种方法

转载：[http://www.zhangxinxu.com/wordpress/?p=2357][http_www.zhangxinxu.com_wordpress_p_235

àì夳堔傛蜴生んèń/ 2022年05月21日 02:35/ 0 赞/ 156 阅读

相关 UITableView .grouped 类型去除顶部间距

在设置 UITableView 的 style 为 .grouped 类型的时候，发现第一个 cell 的顶部存在大段的间距，而改为 .plain 类型则没有这个间距，效果如下

╰+攻爆jí腚メ/ 2021年12月22日 08:15/ 0 赞/ 468 阅读

相关两个按钮间设置空格（间距）

<button id="search">查询</button><button id="add" style="margin-left:10px;">新增</button

今天药忘吃喽~/ 2021年09月23日 09:52/ 0 赞/ 598 阅读