參考:http://www.jb51.net/css/76707.html

http://www.webhek.com/remove-whitespace-inline-block/

inline-block 属性的使用随处可见,ie 从 5.5 开始就已经支持 display:inline-block 了,只是支持的并不是那么完美,接下来为大家详细介绍下空白间隙是如何产生的,以及解决办法,感兴趣的朋友可以参考下哈
 

去掉display:inline-block元素间的多余空白

如下一段代码,display:inline-block元素间的多余空白:

XML/HTML Code复制内容到剪贴板
  1. <style type="text/css">
  2. *{margin:0; padding:0;}
  3. body{font:12px/20px Tahoma, Geneva, sans-serif; padding:200px;}
  4. img {border:0;}
  5. ul li{ list-style:none;}
  6. .test{width:200px; border:1px blue solid;}
  7. .test a{width:32px; height:32px; display:inline-
    block; text-indent:-9999em; *text-indent:0; *line-height:0; *font-
    size:0; background:blue;} /* *号部分解决IE7 无法显示 display:inline-block 元素里面的内
    容,博客内有文章介绍 */
  8. </style>
  9. <div class="test">
  10. <a href="#"></a>
  11. <a href="#"></a>
  12. <a href="#"></a>
  13. <a href="#"></a>
  14. <a href="#"></a>
  15. </div>

运行截图:

会发现 每1个带display:inline-block;属性的链接 a 水平、垂直方向都带有一定的空白

解决方法:

方法1(附注释说明):

CSS Code复制内容到剪贴板
  1. .test{width:200px; border:1px blue solid; font-size:0;}
  2. .test a{width:32px; height:32px; display:inline-block; text-indent:-9999em; *text-indent:0; *line-height:0; *font-size:0; background:blue; vertical-align:top;} /* *号部分解决IE7 无法显示 display:inline-block 元素里面的内容,博客内有文章介绍 */
  3. /* display:inline-block元素的父元素定义 font-size:0 ,可去掉元素水平4px的空白,子元素若要显示文字可重新定义font-size属性即可 */
  4. /* display:inline-block元素本身定义 vertical-align 属性可去掉元素垂直方向的多余空白*/

关键在于父元素定义font-size:0 去掉行内块元素水平方向空白;子元素定义vertical-align 属性去掉行内块元素垂直方向空白!
如果标签a内加上任意文字,则display:inline-block元素不会生成垂直方向有空白!

方法2(附注释说明):


过设置父元素 letter-spacing来解决的,该属性的值同字体有关: 如:.test{letter-spacing:-.25em}
要注意的是-.25em是字体设置为Arial时的情况,为其他字体时会有些不同,下面仅列出了常用的几个,
常用字体与letter-spacing的关系:

复制代码

代码如下:

宋体/Verdana -.5em
Arial -.25em
Tahoma -.333em

方法2未经实验,备忘!


今有很多网站都用上了 inline-block 属性,比如 {display:inline-block; *display:inline;
*zoom:1},以上 css 代码随处可见。很多人看见 *display:inline; *zoom:1 就下意识的认为:哦,原来
inline-block 这个属性 ie6 和 ie7 不支持。那么 ie6,7 真的不支持 display:inline-block 吗?

事实上,ie 从 5.5 开始就已经支持 display:inline-block 了,只是支持的并不是那么完美。具体的请阅读淘宝UED官方博客——一丝所写的《display:inline-block 前世今生》。

当我们使用 inline-block 的时候,就会产生“空白间隙”问题。代码如下:

复制代码

代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>inline-block</title>
<link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
<style type="text/css">
li{
display:inline-block;
*display:inline;
*zoom:1;
}
</style>
</head>
<body>
<ul>
<li><img src="data:images/cat.jpg" alt="" width="248" height="162"/></li>
<li><img src="data:images/cat.jpg" alt="" width="248" height="162"/></li>
<li><img src="data:images/cat.jpg" alt="" width="248" height="162"/></li>
</ul>
</body>
</html>

效果图如下:

我们可以看到:在 ie8、chrome、firefox、opera 以及 safari 浏览器下,两张图片之间有“空白间隙”。

但是在 ie6 和 ie7 浏览器下却正常显示,效果如下:

下面我们就来说说这个“空白间隙”是如何产生的,以及解决办法。

先来说说“空白间隙”是怎么产生的?先看下源代码:

复制代码

代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>inline-block</title>
<link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
<style type="text/css">
li{
display:inline-block;
*display:inline;
*zoom:1;
}
</style>
</head>
<body>
<ul>
<li><img src="data:images/cat.jpg" alt="" width="248" height="162"/></li>
<li><img src="data:images/cat.jpg" alt="" width="248" height="162"/></li>
<li><img src="data:images/cat.jpg" alt="" width="248" height="162"/></li>
</ul>
</body>
</html>


上面的代码我们很难发现产生“空白间隙”的问题。其实这个问题是我们写代码的习惯所造成的。平时我们写代码,为了使代码看上去“层级分明”,通常会在标签
结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合并成一个空白符,而产生“空白间隙”的真正原因就是这
个让我们并不怎么注意的空白符。

既然我们已经知道产生问题的原因了,那么就很好解决该问题。空白符也是字符,只要是字符就会联想到字体,字体大小之类的。所以去除空白符的存在只需要设置字体大小为零就行了(font-size:0;)。修改已上代码:

复制代码

代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>inline-block</title>
<link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
<style type="text/css">
ul{
font-size:0;
}
li{
display:inline-block;
*display:inline;
*zoom:1;
}
</style>
</head>
<body>
<ul>
<li><img src="data:images/cat.jpg" alt="" width="248" height="162"/></li>
<li><img src="data:images/cat.jpg" alt="" width="248" height="162"/></li>
<li><img src="data:images/cat.jpg" alt="" width="248" height="162"/></li>
</ul>
</body>
</html>

可以看到在 ie8,firefox,chrome 和 opera 浏览器下已经没有问题了,但是在 safari 浏览器下还是有问题。

关于 safari 浏览器的兼容,请阅读大漠写的《如何解决inline-block元素的空白间距》。

最后整理:

复制代码

代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>inline-block</title>
<link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
<style type="text/css">
ul{
font-size:0;
letter-spacing: -8px;/*根据不同字体字号或许需要做一定的调整*/
word-spacing: -8px;
}
li{
display:inline-block;
*display:inline;
*zoom:1;
letter-spacing:normal;
word-spacing:normal;
}
</style>
</head>
<body>
<ul>
<li><img src="data:images/cat.jpg" alt="" width="248" height="162"/></li>
<li><img src="data:images/cat.jpg" alt="" width="248" height="162"/></li>
<li><img src="data:images/cat.jpg" alt="" width="248" height="162"/></li>
</ul>
</body>
</html>

测试浏览器:ie6,ie7,ie8,chrome,firefox,safari,opera。

方法0:各元素间不留任何空白

一个100%能解决这个问题的方法是在你的HTML代码里元素间不留任何空白:

<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>

当然,这样看起来很乱,让代码不好维护,但很实用,很直观,更重要的……很可靠。

方法1:在父元素上设置font-size: 0

解决这个空白问题最好的方案是在这些inline-block元素的父元素上设置font-size: 0。如果你的<UL>里有inline-block的<LI>,那你可以这样做:

.inline-block-list { /* ul or ol with this class */
font-size: 0;
} .inline-block-list li {
font-size: 14px; /* put the font-size back */
}

为了不让父元素的字体大小影响子元素,你需要重新在子元素上设置font-size值,这通常很简单。唯一可能遇到麻烦的情况是你用相对大小设置字体。但大多数时候,这样的方法能解决你的问题。

方法2:HTML注释

这种方法有点暴力,但同样能奏效。将HTML元素间用注释填充,这跟它们之间没有空白效果一样:

<ul>
<li>Item content</li><!--
--><li>Item content</li><!--
--><li>Item content</li>
</ul>

用一个词…恶心。用两个词…非常恶心。用三个词….OK,你明白。但这确实管用!

方法3:负边距

跟方法2很相似,抱歉。你可以利用inline-block的灵活性,给它们设置一个负边距,隐藏空白:

.inline-block-list li {
margin-left: -4px;
}

这种方法最不推荐,因为你必须考虑到各种情况,有时候会出现一些无法预料的空白。最好不用这招。

方法4:首尾接龙

另外一个利用HTML标记的方法是将元素的闭合标记和下一个元素的开始标记靠在一起:

<ul>
<li>Item content</li
><li>Item content</li
><li>Item content</li>
</ul>

并不像HTML注释那样丑陋,但我宁愿手工删除那些空白,而不考虑代码的可读性。

没有一个方法是非常理想的,但在网页中不留空白也是一个烂方法。这并不是在警告你不要使用inline-blockinline-block仍然是非常的有用,只是在使用你要明白如何处理里面出现的空白。

inline-block及解决空白间距的更多相关文章

  1. [Web 前端] 解决因inline-block元素导致的空白间距和元素下沉

    cp from : https://www.jianshu.com/p/617e78a27c88 ** 前言: ** CSS 中的 display:inline-block 是笔者最为喜欢的元素之一, ...

  2. inline-block元素的空白间距解决方法<转>

    使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果.有关于使用inline-block来代替float的讨论也蛮多的. 不过就是使用inline ...

  3. 如何解决inline-block元素的空白间距 css 完美解决

    转载W3CPLUS,链接地址:http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements 有关于使用inli ...

  4. ios8 UITableView设置 setSeparatorInset:UIEdgeInsetsZero不起作用的解决办法(去掉15px空白间距)

    但是在ios8中,设置setSeparatorInset:UIEdgeInsetsZero 已经不起作用了.下面是解决办法: 首先在viewDidLoad方法加入以下代码: if(leftTable! ...

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

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

  6. inline-block元素的空白间距

    inline-block元素的空白间距 html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  7. CSS - display:inline-block 相邻元素间有4px的空白间距

    取消“display:inline-block 相邻元素间有4px的空白间距” Demo:http://jsfiddle.net/JSDavi/p6gcx6nx/ 例子: <div sytle= ...

  8. python问题:IndentationError:expected an indented block错误解决《转》

    python问题:IndentationError:expected an indented block错误解决 标签: python语言 2012-07-07 17:59 125145人阅读 评论( ...

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

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

随机推荐

  1. Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现

    UI系列教程第八课:Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现 今天蓝老师要讲的是关于新浪新闻侧滑界面的实现.先看看原图: 如图所示,这种侧滑效果以另一种方式替 ...

  2. sqlite3经常使用命令&amp;语法

    http://blog.csdn.net/linchunhua/article/details/7184439 sqlite数据库仅仅用一个文件就ok,小巧方便,所以是一个很不错的嵌入式数据库,SQL ...

  3. 秒杀多线程第八篇 经典线程同步 信号量Semaphore

    阅读本篇之前推荐阅读以下姊妹篇: <秒杀多线程第四篇一个经典的多线程同步问题> <且不超过最大资源数量. 第三个參数能够用来传出先前的资源计数,设为NULL表示不须要传出. 注意:当 ...

  4. MySQL 加密/压缩函数

    这些问题可能导致数据值的改变.一般而言,上述问题可能在你使用非二进制串数据类型(如char,varchar,text等数据类型)的情况下发生. AES_ENCRYPT()和AES_DECRYPT() ...

  5. jsPlumb开发入门教程(实现html5拖拽连线)

    jsPlumb是一个强大的JavaScript连线库,它可以将html中的元素用箭头.曲线.直线等连接起来,适用于开发Web上的图表.建模工具等.它同时支持jQuery+jQuery UI.MooTo ...

  6. Android模块化编程之引用本地的aar

    随着项目越来越多,代码的复用就变得异常重要,这时候就要进行模块化编程,就是把一些通用的组件或者类库做成单独的模块,其他项目直接进行引用就好.针对Android开发最常见的就是Android Libra ...

  7. css变形几大属性

    1.transform: transform-function() * | none; transform-function: translate().scale().rotate().skew(). ...

  8. Sass简介,安装环境,Sass的语法格式及编译调试

    什么是 CSS 预处理器? 定义:CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进 ...

  9. F# 既能解释执行,也能编译执行

    F# 除了是函数式语言和面向对象语言之外,还有个突出的特点是:既能解释执行,也能编译执行.   一般说来,一种语言只能选择其一种.比如说C++.C#是编译执行,不能解释执行,象Matlab.R是解释执 ...

  10. Apache Tomcat 7.0 Manager APP

    解决Tomcat 7.0 进入项目管理页面时的密码问题 根据红框中的提示得知缺少manager管理角色,所以我们到Tomcat的conf文件夹下找到tomcat-users.xml文件,添加管理角色, ...