当我们将元素设为inline-block时，总是会莫名其妙出现一些间距

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            ul {

                padding-left: 0;

            }

            ul li {

                width: 20px;

                height: 20px;

                background: red;

                display: inline-block;

            }

        </style>

    </head>

    <body>

        <ul>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </body>

</html>

效果如下:

原因在于空白符的存在！</li>与下一行的<li>之间存在空白换行符

解决方法一般是在不破坏dom结构的前提下改变写法以清除换行符

1.结束标签与开始标签拼接

<ul>

    <li>

    </li><li>

    </li><li>

    </li><li>

    </li>

</ul>

2.拆分开始标签

<ul>

    <li>

    </li><li

    ></li><li

    ></li><li

    ></li>

</ul>

3.拆分结束标签

<ul>

    <li></li

    ><li></li

    ><li></li

    ><li></li>

</ul>

4.将换行符注释掉

<ul>

    <li></li><!--

    --><li></li><!--

    --><li></li><!--

    --><li></li>

</ul>

5.使用margin负值

即将margin-left设为负值，让其向左偏移，但偏移距离与浏览器、上下文字体及字体大小有关，一说为-0.25em，亲测并不适用，故此方法适用性不佳

6.清除闭合标签（看起来怪怪的。。）

<ul>

    <li>

    <li>

    <li>

    <li>

</ul>

注意: 父元素的闭合标签不可省去，否则在低版本浏览器(主要指IE)上会有问题

7.父元素font-size设为0

原理很简单，父元素font-size设为0后空白字符字体大小也为0，自然看不出来，但是在有些浏览器上，最小字体有限制，主要指的是chrome，

这时，可加上-webkit-text-size-adjust: none （-webkit-text-size-adjust 是否根据设备大小调整字体，仅仅在移动设备上有效），但最新的chrome已解决此问题

8.letter-spacing设为负值

将leter-spacing设为负值可减少设置消除间距，不同浏览器数值不一样，一般不会发生叠加，但opera上会有过小还原的现象。

9.word-spacing设为负值

类似于letter-spacing的效果，但过小时会发生叠加，私认为此方法也不算可取。

因此现阶段最好的方法为: 改变dom结构、清除闭合标签及font-size设为0

inline-block间距解决方案的更多相关文章

  1. inline元素和inline-block元素的4px空白间距解决方案

    实在不想写了,要吐了,看到一篇讲的比较全的文章,直接粘链接了 inline元素和inline-block元素的4px空白间距解决方案 出自脚本之家

  2. inline-block元素的4px空白间距解决方案

    http://www.jb51.net/css/68785.html  inline-block元素的4px空白间距解决方案 

  3. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

  4. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  5. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

  6. IE6双倍margin间距解决方案

          问题:在IE6下如果某个标签使用了float属性,同时设置了其外补丁“margin:10px 0 0 10px”可以看出,上边距和左边距同样为10px,但第一个对象距左边有20px. 解决 ...

  7. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  8. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  9. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

随机推荐

  1. 求重集的r-组合

    具体的就不在这里说了,如果有兴趣的可以把我的工程包下载下来看,留个URL http://pan.baidu.com/s/1bnes1HX

  2. u-boot-2014_04在TQ2440上的移植

    本文详细介绍了新版本的u-boot-2014_04在tq2440平台上的移植过程,期间参考了网上的其他移植文档,还有韦东山的移植uboot视频,讲的很好.下面是共享链接,欢迎下载,一同学习.其中有移植 ...

  3. html自定义标签属性

    <a href="#" _asd="xxxx" onclick="test(event)">test</a> < ...

  4. 【SQLServer2008】之如何导入mdf，ldf文件、导入.mdf文件报错解决问题以及如何获得Authenticated Users 权限

    一.如何导入mdf,ldf文件: 链接:http://jingyan.baidu.com/article/09ea3ede21258cc0afde3943.html 二.导入.mdf文件报错解决问题 ...

  5. 09 nginx Rewrite(重写)详细解析

    一:Rewrite(重写)详细解析 rewrite 重写 重写中用到的指令 if  (条件) {}  设定条件,再进行重写 set #设置变量 return #返回状态码 break #跳出rewri ...

  6. bat命令遍历文件和bat参数说明

    **************************************************************************************************** ...

  7. php扩展安装phpize

    安装php(fastcgi模式)的时候,常常有这样一句命令:/usr/local/webserver/php/bin/phpize 一.phpize是干嘛的? phpize是什么东西呢?php官方的说 ...

  8. IP地址、子网掩码、网关的关系

    网络管理中的IP地址.子网掩码和网关是每个网管必须要掌握的基础知识,只有掌握它,才能够真正理解TCP/IP协议的设置.以下我们就来深入浅出地讲解什么是子网掩码. IP地址的结构 要想理解什么是子网掩码 ...

  9. Android 与H5之间的js交互

    之前项目做过一些Android和Html5之间js交互方面的东西,今天有时间就总结一下: 一.为什么要进行js交互: 为了方便原生开发和Html之间数据传递,在静态页面的情况下可以改变原生开发的页面: ...

  10. 洛谷P2661 信息传递==coedevs4511 信息传递 NOIP2015 day1 T2

    P2661 信息传递 题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知 ...