一个元素如果被设置为display:inline-block,那么这个元素将表现为行内块的性质。被设为行内块的元素

对内(子元素)表现为块级框,具体为可以设置高度宽度,可以设置垂直margin和padding等;对兄弟元素

则表现为行内框,具体表现为相邻行内块可在同一行显示,而且有着行内元素的特点,就是框与框之间可以出现

空白,造成空白的方式可以使“空白符,制表符,换行符”。

可以通过简单的方式消除行内块之间的空白,就是在行内块的包含块上设置属性:

  

.wrapper{font-size: 0;*word-spacing: -1px;}

font-size设为0,可以让这些空白符的大小为0,从而不显示。但是在IE6,7下存在1px间隔现象,这样可以通过

设置word-spacing来修正。

但是对于Safari来说,不支持字体大小为0,所以需要额外的修正:

@media screen and (-webkit-min-device-pixel-ratio:0) {
.wrapper {
letter-spacing: -4px; /* 修正Safari */
}
}

另外,IE6,7并没有inline-block属性,但是可以通过对行内元素触发hasLayout来模拟。

综上,修正行内块元素之间空白的方式的实现:

        @media screen and (-webkit-min-device-pixel-ratio:0) {
.wrapper {
letter-spacing: -4px; /* Safari 等不支持字体大小为 0 的浏览器,根据父级字体调节*/
}
}
.wrapper{font-size: 0;*word-spacing: -1px;}
.il{border:1px solid #000000;display:inline-block;
word-spacing: normal;letter-spacing:normal;*display:inline;*zoom:1;width:80px;height:100px;background: #cecece;font-size: 14px;vertical-align: top;}
.bl{border:1px solid #000000;width:80px;height:100px;word-spacing: normal;letter-spacing:normal;background:#d0e9c6;display: inline-block;*display:inline;*zoom:1;font-size: 14px;vertical-align: top;}
img{border:1px solid #000000;}

<div class="wrapper">
  <span class="il">inline-block 1</span>
  <span class="il">inline-block 2</span>
  <span class="il">inline-block 3</span>
  <div class="bl">block 1</div>
  <div class="bl">block 2</div>
  <div class="bl">block 3</div>
  <img src="../../img/1.jpg" width="80" height="100">
  <img src="../../img/2.jpg" width="80" height="100">
</div>


  

清除inline-block元素之间的空白的更多相关文章

  1. 清除行内元素之间HTML空白的几种解决方案

    行内块(inline-block)是非常有用的,特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时. 问题来了,HTML源码中行内元素之间的空白有时候显示 ...

  2. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  3. 清除行内元素之间的HTML空白

    原文连接:Remove Whitespace Between Inline-Block Elements 原文日期: 2013年8月27日 翻译日期: 2013年8月28日 至今我还记得年轻是在IE6 ...

  4. 5种方法去掉HTML中Inline-Block元素之间的空白

    5种方法去掉HTML中Inline-Block元素之间的空白 记得年轻时我在IE6上开发,绝望的希望IE6能支持display: inline-block功能.当需要在”inline”元素上控制mar ...

  5. 如何移除inline-block元素之间的空白

    我们想要的是<li>元素可以紧贴在一起,但是很显然,结果“出乎意料”.那么有什么方法可以让结果符合我们的预期呢?所能想到的解决方法至少有以下四种,而每种方法也都有其优劣所在,至于要如何选择 ...

  6. 去除行内(inline/inline-block)元素之间的间距

    先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...

  7. 行内块inline-block元素之间出现空白间隙原因及解决办法

    首先,来看下具体的问题,下面是用inline-block布局实现的两边固定宽度,中间自适应的html代码: 1 2 3 4 5 6 7 8 9 <section class="layo ...

  8. inline-block 元素之间的空白问题

    一.遇到的问题 前些天写瀑布流布局的时候,发现明明计算好了宽度使得一行能放下三张图片,实际效果却总是放不下,图片会挤到下一行去.上图: 可以看到,我本来是想要两行图片,每一行是三张.结果现在第一行的图 ...

  9. 两个inline-block中间有空白,解决inline-block 元素之间的空白问题

    目录 一.遇到的问题 二.举个简单的栗子分析问题 三.解决办法 一.遇到的问题 前些天写瀑布流布局的时候,发现明明计算好了宽度使得一行能放下三张图片,实际效果却总是放不下,图片会挤到下一行去.上图: ...

随机推荐

  1. [LintCode] Sort List 链表排序

    Sort a linked list in O(n log n) time using constant space complexity. Have you met this question in ...

  2. DSY2933*地图

    Description   一个人口统计办公室要绘制一张地图.由于技术的原因只能使用少量的颜色.两个有相同或相近人口的区域在地图应用相同的颜色.例如一种颜色k,则A(k) 是相应的数,则有: 在用颜色 ...

  3. Spring MVC的配置文件(XML)的几个经典案列

    1.既然是配置文件版的,那配置文件自然是必不可少,且应该会很复杂,那我们就以一个一个的来慢慢分析这些个经典案列吧! 01.实现Controller /* * 控制器 */ public class M ...

  4. java面向对象_static关键字

    1. 修饰成员变量:有static修饰的为静态变量,没有static修饰的称为实例变量. 实例变量:属于对象的,一个对象有一份.在创建对象的时候被初始化,存在多个副本,各个对象拥有的副本互不影响.存储 ...

  5. return array 评论添加状态和提示信息

    ThinkSNS漏洞系列第一弹,某处处理不当导致SQL注入 漏洞点出现在Comment Widget里:\addons\widget\CommentWidget\CommentWidget.class ...

  6. Myeclipse中web project各种常见错误及解决方法(持续更新)

    创建web project时的问题 error:Install Dynamic web Module Facet卡住 solution:把网络关掉再创建就可以 Servlet error:The se ...

  7. TreeView 使用方法:(在View.Details模式下)

    1.建立TreeView的標題         2.建立TreeView的Item         3.在TreeView的Item中的建立SubItem                  如果將各部 ...

  8. 第一章-第十四题(Hello world程序)

    题目:请找一个同学结对 (参看本书结对编程的内容),两人共同工作 (不能分开干活),从上面的列表中选取两个平台,在每个平台上,写一个最简单的 "Hello World" 类型的程序 ...

  9. Android课程---关于数据存储的学习(3)之数据库和事务

    DataActivity3.java package com.hanqi.test5; import android.content.ContentValues; import android.dat ...

  10. 抛开flash,自己开发实现C++ RTMP直播流播放器

    抛开flash,自己开发实现C++ RTMP直播流播放器 众所周知,RTMP是以flash为客户端播放器的直播协议,主要应用在B/S形式的场景中.本人研究并用C++开发实现了RTMP直播流协议的播放器 ...