一、现象描述

　　真正意义上的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. Python微信公众号开发

    最近老大叫我学习开发微信,试着玩了下.网上查了下文档.有点过时. 简单步骤: 1)申请服务器并完成环境配置 去腾讯云购买云服务器.当然你也可以购买其他产品,比如阿里云.因为我是学生,有优惠110一年. ...

  2. Jenkins配置报告与邮件插件

    用jenkins做持续集成时,需要发送报告与邮件,下面说一下如何配置报告与邮件的插件 1:配置报告插件 我们先装一个Report插件,在系统管理-管理插件中找  HTML Publisher plug ...

  3. 怎么确定Oracle客户端安装成功

    可通过能否登录sqlplus来判断是否安装成功. 操作系统:windows10 oracle版本:oracle 11g 步骤: 1.电脑win键+R键,输入cmd,进入命令提示符. 2.命令行中输入: ...

  4. js中点与方括号及for...in

    中括号运算符总是能代替点运算符.但点运算符却不一定能全部代替中括号运算符. 当用中括号代替点时,属性名需加双引号. 中括号运算符可以用字符串变量的内容作为属性名.点运算符不能. 中括号运算符可以用纯数 ...

  5. PHP访问数据库配置通用方法

    提取一种对数据库配置的通用方式 目的是通过通用类访问配置文件的方式,提供对数据库连接的动态获取和设置,使开发时和生产应用时都能够提供灵活的.简化的.解耦的操作方式.比如在配置文件中配置好两套数据库访问 ...

  6. union 的两个用处

    1 节约内存: 这一功能可以参考我的其它博文: https://i.cnblogs.com/EditPosts.aspx?postid=8545190&update=1 2 测试机器大小端: ...

  7. Android推送 百度云推送 入门篇

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/27231237 现在app基本都有推送的功能,于是看了下百度云的推送,官方文档和D ...

  8. 利用 Python + Selenium 实现对页面的指定元素截图(可截长图元素)

    对WebElement截图 WebDriver.Chrome自带的方法只能对当前窗口截屏,且不能指定特定元素.若是需要截取特定元素或是窗口超过了一屏,就只能另辟蹊径了. WebDriver.Phant ...

  9. Python 三级菜单 增强版

    需要实现的功能是:三级菜单1.从文本内读出选项2.查询每一级的选项,并能对选项进行增/删/改功能3.每一级可以退出程序或者返回上一层 2018-5-14 更新内容 思路 实现过程中的BUG及解决方案: ...

  10. Class path & Path

    Class path: 配置类文件 (配置完之后,在任何盘符下都可以访问该配置路径下的文件); Path: 配置可执行文件; Class path 配置时路径后面加分号与不加分号的区别 (当前路径与配 ...