一、遇到的问题

前些天写瀑布流布局的时候,发现明明计算好了宽度使得一行能放下三张图片,实际效果却总是放不下,图片会挤到下一行去。上图:



可以看到,我本来是想要两行图片,每一行是三张。结果现在第一行的图片跑到第二行去了。

代码结构很简单:

  1. <li>
  2. <a></a>
  3. <a></a>
  4. <a></a>
  5. </li>
  6. <li>
  7. <a></a>
  8. <a></a>
  9. <a></a>
  10. </li>
  11. 其中a标签设置了display:inline-block

即使给a标签设置了padding:0;margin:0;图片之间仍然有小间隙。

然后突然想到当初学习布局的时候,看过某大神提过空白的问题,结果因为没有实践,所以就忘了这码事了。

二、举个简单的栗子分析问题

  1. <div style="border:1px red solid">
  2. <a style="background-color:pink;display:inline-block;width:20%;">1111</a>
  3. <a style="background-color:green;display:inline-block;width:80%;">2222</a>
  4. </div>

结果:



我把粉色的宽度调小一点,19%。再试试!



发现这两个块之间的有个白色的小空隙了吧?为啥会有空白呢?

因为:发明html的人是老外,老外使用空格作为单词之间的间隔的。inline-block 就像一个个的单词,刚刚的代码不是换行了吗?嗳~html还有一个空白字符压缩的特点,你换行也好,tab也好,多个空格也好,都会压缩成一个空格(还记得当年初学前端时遇到空格不生效只能用&nbsp;的时候吗)。

现在知道问题的原因了,那么怎么解决呢?

三、解决办法

1、不换行

  1. <div style="border:1px red solid">
  2. <a style="background-color:pink;display:inline-block;width:20%;">1111</a><a
  3. style="background-color:green;display:inline-block;width:80%;">2222</a>
  4. </div>

缺点:这样写代码,太不优雅了,解读性太差。最重要的是运用模版的时候,比如我遇到问题的瀑布流,那都是只写一个元素,剩下的是通过循环遍历,自动添加的元素,根本没办法控制换不换行。

2、给父元素设置font-size:0

缺点:子元素如果需要字体的话,会需要重新在子元素添加fon-size的设置。但如果像我一样是图片不需要文字的话,就很完美了。

3、不用inline-block改为float

float是忽略空白符的,不过你的CSS布局可能要重新花一下心思,可能会涉及到清除浮动之类设置。

4、word-spacing属性

这个属性是用来设置单词之间的空白符的,针对IE7及以下浏览器hack,定义word-spacing为-1px,即可修复IE7及以下浏览器下顽固的残留1px间隙问题。

根据你字体的大小,word-spacing的值应该相应的调整。并且不同浏览器的兼容性也不好,个人不是很推荐这种方式。如果hack的话,代码要写一大堆,感觉很麻烦。如果你非要用那我还能怎么办?当然是选择原谅你啦,甩给你一个参考链接:http://demo.doyoe.com/css/inline-block-space/

5、white-space-collapse

CSS3 Text Effects Module**》中就有了「white-space-collapse」属性,用来设置或者检索元素内包含的空白字符。有如下取值:

  • collapse:将一系列空白折叠为一个单独的字符(或者在某些情况下,没有字符)
  • preserve:阻止用户代理折叠空白,换行符保留为强制换行符。
  • preserve-breaks:该值将与「collapse」一样折叠空白字符,但保留换行符为强制换行符。
  • discard:抛弃所有空白。

    现在该属性被转移到《CSS Text Level 4》中,该规范中, 「white-space」分为两部分:white-space-collapse和text-wrap

所以解决办法是:white-space-collapse:discard

但是,由于该属性本身存在的诸多问题以及浏览器厂商没有及时跟进和实现,所以根本用不了。希望这个属性快快上架啦~~

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

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

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

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

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

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

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

  4. 清除inline-block元素之间的空白

    一个元素如果被设置为display:inline-block,那么这个元素将表现为行内块的性质.被设为行内块的元素 对内(子元素)表现为块级框,具体为可以设置高度宽度,可以设置垂直margin和pad ...

  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中间有空白,解决inline-block 元素之间的空白问题

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

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

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

随机推荐

  1. 【原创】 Docker 中 运行 ASP.NET Core 站点

    一. 建立 .NetCore 项目  a.新建项目 b.选择项目类型 c.添加控制器 d.添加视图 e.修改默认请求 f.发布 二. 准备 CentOS 环境 a.准备虚拟机 b.安装 docker ...

  2. Java jvm级别native关键词、JNI详解

    1.native关键词的引入 再完美的编程语言也有自己的不足之处,当然Java也不例外,Java的不足之处除了体现在运行速度(这点往往被一些其他编程语言使用者所诟病)上要比传统的C++慢许多之外,Ja ...

  3. Unreal Engine 4 Radiant UI 入门教程(零)在场景中摆放网页

    相关的学习资源: https://forums.unrealengine.com/showthread.php?12097-PLUGIN-RadiantUI-SDK-UIs-HUDs-Interact ...

  4. [CF373C]计算袋鼠是愉快的(Counting Kangaroos is Fun)-贪心

    Problem 计算袋鼠是愉快的 题目大意 有n只袋鼠,如果一个袋鼠体积是另一个袋鼠的两倍或以上,则小袋鼠能被大袋鼠装进袋子里,装进去后就看不到袋子里的袋鼠了,问这群袋鼠如何行动才能使得它们看着数量最 ...

  5. [LeetCode] Wildcard Matching 题解

    6. Wildcard Matching 题目 Implement wildcard pattern matching with support for '?' and '*'. '?' Matche ...

  6. HTML中使用JavaScript的三种方式及优缺点

      1.内部js: 在直接在页面的<script></script>标签内写js代码 优点:相对于使用行内js,内部js代码较为集中,与页面结构的实现代码耦合度较低,比较便于维 ...

  7. 51nod_1384:全排列(STL)

    题目链接 记住next_permutation函数的用法,另外string在这里比char[]慢好多啊.. //#include<bits/stdc++.h> //using namesp ...

  8. JavaScript垃圾收集-标记清除和引用计数

    JavaScript具有自动垃圾收集机制,执行环境会负责管理代码执行过程中使用的内存. 垃圾收集机制原理:垃圾收集器会按照固定的时间间隔(或代码执行中预定的收集时间), 周期性地执行这一操作:找出那些 ...

  9. 【科普】什么是TLS1.3

    TLS1.3是一种新的加密协议,它既能提高各地互联网用户的访问速度,又能增强安全性. 我们在访问许多网页的时候,常常会在浏览器的地址栏上看到一个锁的图标,并使用"https"代替传 ...

  10. Windows查看端口使用状况

    使用端口是我们在进行远程或者打印机等都会遇到的,但是有很多用户会遇到端口被占用的情况,遇到这样的问题首先就要找出电脑中的所以端口然后进行查看,还是有很多人不知道该如何查看电脑端口. 1 查看windo ...