一、现象描述

　　真正意义上的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. TensorFlow-谷歌深度学习库 命令行参数

    程序的入口: tf.app.run tf.app.run( main=None, argv=None ) 运行程序,可以提供'main'函数以及函数参数列表.处理flag解析然后执行main函数. 什 ...

  2. python_日历

    >>> import datetime>>> Today=datetime.date.today()>>> Todaydatetime.date( ...

  3. linux常用的时间获取函数（time，gettimeofday，clock_gettime，_ftime，localtime，strftime ）

    time()提供了秒级的精确度 1.头文件 <time.h> 2.函数原型 time_t time(time_t * timer) 函数返回从TC1970-1-1 0:0:0开始到现在的秒 ...

  4. 【转】spring cloud eureka 参数配置

    eureka.client.registry-fetch-interval-seconds 表示eureka client间隔多久去拉取服务注册信息,默认为30秒,对于api-gateway,如果要迅 ...

  5. Tiny4412之蜂鸣器驱动与led灯驱动

    一:LED驱动编写 要编写LED驱动,首先的知道开发板的构造:开发板分为核心板与底板:编写驱动的第一步就是要看开发板,找到LED灯在开发板上的位置及所对应的名字:第一步就要查看核心板电路图,以及底板电 ...

  6. Oracle-03：关系型数据库和非关系的数据库的各自优缺点与区别

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 常见的非关系型数据库: Mongo DB Redis HBase 二维表的介绍: 在关系模型中,数据结构表示为 ...

  7. SSM-SpringMVC-14：SpringMVC中大话注解式开发基础--呕心沥血版

     ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 注解的基础我不再多啰嗦,百度一搜很多,很详细啊,我就讲一下SpringMVC中的注解入门 通过注解的方式定义 ...

  8. ASP.NET三剑客 HttpApplication HttpModule HttpHandler 解析

    我们都知道,ASP.Net运行时环境中处理请求是通过一系列对象来完成的,包含HttpApplication,HttpModule, HttpHandler.之所以将这三个对象称之为ASP.NET三剑客 ...

  9. SVN更新失败，提示locked 怎么破

    有时在svn更新或提交代码时,会报错,让你cleanup  如果cleanup解决不了,就要删除被锁定的文件夹下的文件,然后就可以更新或提交了 怎么做呢? 1.首先在CMD中进入你工作目录被锁定的文件 ...

  10. ORA-12737: Instant Client Light: unsupported server character set CHS16GBK

    当使用Navicat Premiun 英文版连接oracl时可能会报ORA-12737: Instant Client Light: unsupported server character set ...