一、现象描述:inline-block形式水平呈现的元素,换行显示或空格分割的情况下,元素之间会有间距,实例如下:

使用CSS将行内元素的display设置为inline-block时,也会出现间隔:

<ul class="test">
<li>首页</li>
<li>3D打印服务</li>
<li>3D打印机</li>
<li>关于我们</li>
</ul>

ul.test{width:500px;text-align:center;list-style:none;outside:none;background-color:#eee;padding:0 10px;}

ul.test li{display:inline-block;*display:inline;zoom:1;width:100px;background-color:#9f0;}

二、移除空格的方法:

方法一:去掉HTML代码标签之间的空格

或借助于标签注释

方法二:使用margin负值,由于margin负值的大小是与上下文字体和文字大小相关的,因此不适合大规模使用。

方法三:不设置闭合标签

方法四:使用font-size:0;

因chrome浏览器有一个默认的最小字体大小限制,为兼容chrome浏览器最好使用代码:font-size: 0;      -webkit-text-size-adjust:none;

display: inline-block元素的父元素定义font-size:0 , 可去掉水平方向的空白, 子元素若要显示文字可重新定义font-size属性即可;

display: inline-block元素本身定义vertical-align属性可去掉元素垂直方向的多余空白。

方法五:使用letter-spacing字符间距

ul.test{letter-spacing:-8px;}    ul li{letter-spacing:0;}

若只在父元素使用letter-spacing,li中文字会发生重叠

方法六:使用word-spacing单词间距

ul.test{word-spacing:-8px;}    ul li{word-spacing:0;}

若只在父元素使用word-spacing也可达到相同的效果,且li中文字不会发生重叠

参考:http://blog.csdn.net/xiebaochun/article/details/39178579

inline-block去掉空白距离的方法的更多相关文章

  1. winform中button点击后再点击其他控件致使button失去焦点,此时button出现黑色边线,去掉黑色边线的方法

    winform中button点击后再点击其他控件致使button失去焦点,此时button出现黑色边线,去掉黑色边线的方法 button的FlatAppearence属性下,设置BorderSize= ...

  2. JS去掉首尾空格 简单方法大全(原生正则jquery)

    JS去掉首尾空格 简单方法大全 var osfipin= ' http://www.cnblogs.com/osfipin/ '; //去除首尾空格 osfipin.replace(/(^\s*)|( ...

  3. 海量数据挖掘MMDS week2: LSH的距离度量方法

    http://blog.csdn.net/pipisorry/article/details/48882167 海量数据挖掘Mining Massive Datasets(MMDs) -Jure Le ...

  4. [Android] Android 去掉界面标题栏的方法

    Android 去掉界面标题栏的方法 这个首先要区分当前Activity 是继承了 Activity 类 ,还是 AppCompatActivity 类 情况一:创建的activity默认继承了App ...

  5. 排错-windows平台下访问oracle em出现空白的解决方法

    排错-windows平台下访问oracle em出现空白的解决方法 by:授客 QQ:1033553122 问题描述 IE浏览器本地访问oem,出现空白页面,就左上角有一行字符 http://loca ...

  6. 通过经纬度坐标计算距离的方法(经纬度距离计算)ZZ

    通过经纬度坐标计算距离的方法(经纬度距离计算) 最近在网上搜索“通过经纬度坐标计算距离的方法”,发现网上大部分都是如下的代码: #define PI 3.14159265 static double ...

  7. iOS利用block实现链式编程方法(Objective-C链式编程)

    objc利用block实现链式编程方法 因为不好读.block和其他语言的匿名函数一样,很多程序员刚开始很难主动去用他. 本文描述block作为属性的实际使用,看懂block,并讲解如何利用block ...

  8. php计算两个坐标(经度,纬度)之间距离的方法

    本文实例讲述了php计算两个坐标(经度,纬度)之间距离的方法.分享给大家供大家参考.具体如下: 这里使用php计算两个坐标(经度,纬度)之间的距离,返回结果为米或者千米 function distan ...

  9. vue打包后显示空白正确处理方法

    vue打包后显示空白正确处理方法是 1.找到配置文件(js与css加载不上) 修改 这样打包处理可以打开但是页面样式会找不到 2.修改(针对css中的图片加载不上) 找到对应的位置加上publicPa ...

随机推荐

  1. 浏览器获取ip地址

    /** * 获取浏览器的ip地址 * @param request * @return */ public static String getIP(HttpServletRequest request ...

  2. SQLSERVER 16进制与10进制转换

    最近工控项目中遇到的16进制与10进制转换,在.NET中比较容易实现,在SQLSERVER中发现没有直接的转换,尤其是出现超出范围的long负数,即无符号64位整数在sqlserver中的存储.网上找 ...

  3. 微信开发教程 Yank.WeiXin.Robot

    http://www.cnblogs.com/yank/category/539657.html

  4. Python模块(scapy)

    scapy scapy相当于linux的tcpdump的功能

  5. 第六篇 Integration Services:初级工作流管理

    本篇文章是Integration Services系列的第六篇,详细内容请参考原文. 简介在前几篇文章中,我们关注使用增量加载方式加载数据.在本篇文章,我们将关注使用优先约束管理SSIS控制流中的工作 ...

  6. Exchanger示例

    Exchanger有两个用户,当一(A)方调用exchange方法之后,就开始等待,直到另一(B)方开始调用exchange方法.两个exchange可以认为是原子性的. public class C ...

  7. iOS navigationbar 透明

    [self.navigationController.navigationBar setTranslucent:YES]; //    为什么要加这个呢,shadowImage 是在ios6.0以后才 ...

  8. 使用duplicate target database ... from active database复制数据库

    使用duplicate target database ... from active database复制数据库 source db:ora11auxiliary db:dupdb 1.修改监听文件 ...

  9. uiwebview加载中文URL

    uiwebview加载中文URL _paperGamePath = [_paperGamePath stringByAddingPercentEscapesUsingEncoding:NSUTF8St ...

  10. Simple GDB case

    to be added...   gdb a.out   [Inferior 1 (process 9718) exited with code 05] (gdb) list Line number ...