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

记得年轻时我在IE6上开发，绝望的希望IE6能支持display: inline-block功能。

当需要在”inline”元素上控制margin和padding时，inline-block属性值变得非常有用，有了它，

你不在需要让这些元素去“block”和“float”。但有一个问题，当使用inline-block时，

HTML元素之间的空白会显示在页面上。很讨厌。有几种方法可以除去这些空白；其中一个非常巧妙。

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

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

• Item content
• Item content
• Item content

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

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

解决这个空白问题最好的方案是在这些inline-block元素的父元素上设置font-size: 0。

如果你的

• 里有inline-block的
• ，那你可以这样做：

  .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元素间用注释填充，这跟它们之间没有空白效果一样：

  • Item content
  • Item content
  • Item content

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

  方法3：负边距

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

  .inline-block-list li {

  margin-left: -4px;

  }

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

  方法4：首尾接龙

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

  • Item content

  >

• Item content

>

Item content

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

没有一个方法是非常理想的，但在网页中不留空白也是一个烂方法。

这并不是在警告你不要使用inline-block，inline-block仍然是非常的有用，只是在使用你要明白如何处理里面出现的空白。

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

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

三种java 去掉字符串中的重复字符函数

三种java 去掉字符串中的重复字符函数 public static void main(string[] args) { system.out.println(removerepeatedchar( ...

Knockout获取数组元素索引的2种方法,在MVC中实现

原文:Knockout获取数组元素索引的2种方法,在MVC中实现 在遍历数组.集合的时候,通常要获取元素的索引,本篇体验使用Knockout获取索引的2种方法. 假设有这样的一个模型: namespa ...

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

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

PHP连接sqlserver的两种方法,向sqlserver2000中写入数据，中文乱码

项目环境是php5.3.28 项目用的ThinkPHP3.2.3  已经mysql5.5数据库,要和另一个项目对接,需要连接sqlsever2000数据库进行一些操作. 第一种用php自带扩展连接数据 ...

Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID

query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的 ...

【java基础 13】两种方法判断hashmap中是否形成环形链表

导读:额,我介绍的这两种方法,有点蠢啊,小打小闹的那种,后来我查了查资料,别人都起了好高大上的名字,不过,本篇博客,我还是用何下下的风格来写.两种方法,一种是丢手绢法,另外一种,是迷路法. 这两种方法 ...

5种方法获取url中文件的扩展名

/** * strrchr - 查找指定字符在字符串中的最后一次出现 * strrpos — 计算指定字符串在目标字符串中最后一次出现的位置 * end — 将数组的内部指针指向最后一个单元 * pa ...

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

先展示一下,行内元素之间存在间距,实例代码如下:

随机推荐

【深入理解计算机系统02】ISA 与内存模型

第二篇:认识ISA(Instruction Set Architecture) 重要概念: [ISA] [IA-32]:Intel把32位x86架构的名称x86-32改称为IA-32,一种身边很常见的 ...

面试题目——《CC150》位操作

面试题5.1:给定两个32位的整数N与M,以及表示比特位置的i与j.编写一个方法,将M插入N,使得M从N的第j位开始,到第i位结束.假定从j位到i位足以容纳M,也即若M=10011,那么j与i之间至少 ...

TestNG Study Note 1 - Eclipse 插件安装

TestNG 插件在线安装 Help -> Install New Software -> Add -> Paste TestNG url to Add:  http://testn ...

CCF真题之命令行选项

201403-3 问题描述 请你写一个命令行分析程序,用以分析给定的命令行里包含哪些选项.每个命令行由若干个字符串组成,它们之间恰好由一个空格分隔.这些字符串中的第一个为该命令行工具的名字,由小写字母 ...

Android 高级UI设计笔记08：Android开发者常用的7款Android UI组件(转载)

Android开发是目前最热门的移动开发技术之一,随着开发者的不断努力和Android社区的进步,Android开发技术已经日趋成熟,当然,在Android开源社区中也涌现了很多不错的开源UI项目,它 ...

jquery通过attr取html里自定义属性原来这么方便啊

正则表达式中的match，test，exec，search的返回值

今天突然被问到了正则表达式,因为长时间不用突然不知道怎么用了,只知道有这么个东西.然后去网上查了一下,感觉写的不少,但解释的有点模糊,今天我来浅谈一下. 1,match的用法 A,在不加全局“g”的情 ...

Linux 的基本操作(文件与目录管理)

文件与目录管理 在linux中什么是一个文件的路径呢,说白了就是这个文件存在的地方,例如在上一章提到的/root/.ssh/authorized_keys 这就是一个文件的路径.如果你告诉系统这个文件 ...

tcp_timestamps和tcp_tw_recycle

不同时开启tcp_timestamps和tcp_tw_recycle的场景描述 FULL NAT下 FULL NAT  在client请求VIP 时,不仅替换了package 的dst ip,还替换了 ...

Linux多台机器配置ssh免登录

.安装ssh. sudo apt-get install ssh. 安装完成后会在~目录(当前用户主目录,即这里的/home/xuhui)下产生一个隐藏文件夹.ssh(ls -a 可以查看隐藏文件). ...