一、现象描述

　　真正意义上的inline-block水平呈现的元素间，换行显示或者空格隔开的情况下会有间距，这是因为浏览器在解析时，会将换行等读取成一个空格导致。

二、移出空格的方法

　　① 我们可以去掉元素之间的换行和空格，这样间距自然就没有了，但是这样会降低代码的可读性，不可取。

    <div>

        <a href="">

        链接1</a><a href="">

        链接2</a><a href="">

        链接3</a><a href="">

        链接4</a>

    </div>

    <div>

        <a href="">链接1</a

        ><a href="">链接2</a

        ><a href="">链接3</a

        ><a href="">链接4</a>

    </div>

    <div>

        <a href="">链接1</a><!--

        --><a href="">链接2</a><!--

        --><a href="">链接3</a><!--

        --><a href="">链接4</a>

    </div>

　　② 使用margin负值，但是，由于外部的不确定因素，以及最后一个元素多出来的负margin值的问题，这个方法也不太可取。

<style>

        a {

            background: pink;

            display: inline-block;

            padding: .5em 1em;

            margin: -3px;

        }

</style>

<body>

    <div>

        <a href="">链接1</a>

        <a href="">链接2</a>

        <a href="">链接3</a>

        <a href="">链接4</a>

    </div>

</body>

　　③ 给父级设置font-size:0，然后再在子元素中设置我们的字体大小，这样也可以去掉元素间的间距。

<style>

        div{

            font-size: 0;

        }

        a{

            font-size: 16px;

            background: pink;

        }

</style>

<div>

        <a href="">链接1</a>

        <a href="">链接2</a>

        <a href="">链接3</a>

        <a href="">链接4</a>

</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="">链接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;

            background: pink;

        }

</style>

<div>

        <a href="">链接1</a>

        <a href="">链接2</a>

        <a href="">链接3</a>

        <a href="">链接4</a>

</div>

去除inline-block元素间的间距的更多相关文章

  1. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  2. 去除行内(inline/inline-block)元素之间的间距

    先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...

  3. html书写行内元素时-tab和换行会在行内元素间引入间距

    目录 html文本中的控制字符会被解析为文本节点 书写行内元素时,换行符LF与水平制表符HT会引入莫名的元素间间隔 其他控制字符是否会引入间距的验证 html文本中的控制字符会被解析为文本节点 举例: ...

  4. 去除inline-block元素间间距的N种方法

    这篇文章发布于 2012年04月24日,星期二,22:38,归类于 css相关. 阅读 147771 次, 今日 52 次 by zhangxinxu from http://www.zhangxin ...

  5. [转]去除inline-block元素间间距的N种方法

    来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子 ...

  6. 去除inline-block元素间间距的N种方法<转>

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

  7. 去除inline-block元素间间距的N种方法(转)

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

  8. 去除inline-block元素间间距的N种方法-zhangxinxu

    张鑫旭原文:点这里进入原文 另外附上大漠老师的如何解决inline-block元素的空白间距地址!!! 去除inline-block元素间间距的N种方法: 一.现象描述 真正意义上的inline-bl ...

  9. 转载>>去除inline-block元素间间距的N种方法《重》

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

随机推荐

  1. Netty中解码基于分隔符的协议和基于长度的协议

    在使用Netty的过程中,你将会遇到需要解码器的基于分隔符和帧长度的协议.本节将解释Netty所提供的用于处理这些场景的实现. 基于分隔符的协议 基于分隔符的(delimited)消息协议使用定义的字 ...

  2. ASP.NET Core & Docker 实战经验分享

    一.前言 最近一直在研究和实践ASP.NET Core.Docker.持续集成.在ASP.NET Core 和 Dcoker结合下遇到了一些坑,在此记录和分享,希望对大家有一些帮助. 二.中间镜像 我 ...

  3. 在VirtualBox中安装BlackArch Linux

    作者:荒原之梦 安装前的准备 下载系统映像:BlackArch Linux官网下载页面 在本文中我使用的是BlackArch Linux的Live ISO,这样可以减少安装时下载系统的时间.Black ...

  4. SpringBoot vue

    springboot 整合vue就行前后端完全分离,监听器,过滤器,拦截器 https://github.com/ninuxGithub/spring-boot-vue-separateA blog ...

  5. 使用 python 处理 nc 数据

    前言 这两天帮一个朋友处理了些 nc 数据,本以为很简单的事情,没想到里面涉及到了很多的细节和坑,无论是"知难行易"还是"知易行难"都不能充分的说明问题,还是& ...

  6. windows部署SpiderKeeper(爬虫监控)

    最近发现了一个spdierkeeper的库,这个库的主要用途是在于配合这scrpyd管理你的爬虫,支持一键式部署,定时采集任务,启动,暂停等一系列的操作.简单来说将scrapyd的api进行封装,最大 ...

  7. Python web简约表白网页源码分享，时光不老，我们不散！

    演示站:c.lmz8.cn打开js/4.js,复制到工具箱的js代码整理那,先解密,方便查看.工具箱:tool.lmz8.cnjs代码整理.在线解码 这个便是文字,只不过呗转码了,所以要用到解码工具. ...

  8. kingpin_parser.go

    ) } //字节大小设置 func Size(s kingpin.Settings) (target *uint64) {     target = new(uint64)     s.SetValu ...

  9. 【BZOJ 3561】 DZY Loves Math VI

    题目: 给定正整数n,m.求   题解: 水题有益身心健康.(博客园的辣鸡数学公式) 其实到这我想强上伯努利数,然后发现$n^2$的伯努利数,emmmmmm 发现这个式子可以算时间复杂度,emmmmm ...

  10. bzoj 1098 poi2007 办公楼 bfs+链表

    题意很好理解,求给出图反图的联通块个数. 考虑这样一个事情:一个联通块里的点,最多只会被遍历一次,再遍历时没有任何意义 所以用链表来存,每遍历到一个点就将该点删掉 #include<cstdio ...