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

Posted 2021-01-21 奔跑的太阳花

目录

• 一、遇到的问题
• 二、举个简单的栗子分析问题
• 三、解决办法

 

一、遇到的问题

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

可以看到，我本来是想要两行图片，每一行是三张。结果现在第一行的图片跑到第二行去了。
代码结构很简单：

<li>
 <a></a>
 <a></a>
 <a></a>
</li>
<li>
 <a></a>
 <a></a>
 <a></a>
</li>
其中a标签设置了display：inline-block

即使给a标签设置了padding：0；margin：0；图片之间仍然有小间隙。
然后突然想到当初学习布局的时候，看过某大神提过空白的问题，结果因为没有实践，所以就忘了这码事了。

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

<div style="border:1px red solid">
<a style="display:inline-block;width:20%;">1111</a>
<a style="display:inline-block;width:80%;">2222</a>
</div>

结果：

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

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

因为：发明html的人是老外，老外使用空格作为单词之间的间隔的。inline-block 就像一个个的单词，刚刚的代码不是换行了吗？嗳～html还有一个空白字符压缩的特点，你换行也好，tab也好，多个空格也好，都会压缩成一个空格（还记得当年初学前端时遇到空格不生效只能用&nbsp；的时候吗）。
现在知道问题的原因了，那么怎么解决呢？

 

三、解决办法

1、不换行

<div style="border:1px red solid">
<a style="display:inline-block;width:20%;">1111</a><a 
style="display:inline-block;width:80%;">2222</a>
</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
但是，由于该属性本身存在的诸多问题以及浏览器厂商没有及时跟进和实现,所以根本用不了。希望这个属性快快上架啦～～