解决inline-block引起的空白间距问题

来源：互联网发布：win8 怎么下载软件编辑：程序博客网时间：2024/05/22 10:38

当我们在对元素的display属性使用inline-block值时，会在元素间形成一定宽度的空白间距。

下面看一下源代码：

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"/><title>inline-block</title><style type="text/css">li{display:inline-block;width:100px;height:100px;border-radius:1em;padding:10px;}</style></head><body><ul><li style="background-color:red">1</li><li style="background-color:blue">2</li><li style="background-color:orange">3</li></ul></body></html>

页面效果如下图所示：

仔细看一下代码，估计我们很难发现空白间距产生的原因。其实产生空白间距的原因是我们编码的习惯照成的，我们习惯在标签结束处敲一个回车，然而回车会产生回车符，相当于空白符。当多个空白符连续使用时，会合并成一个空白符。正是这个习惯照成了空白间隔。

那么，我们应该解决呢？编者在这里想到了两个不错的解决办法。

1、从html结构入手

改变后的源代码如下所示：

<ul><li style="background-color:red">1</li><li style="background-color:blue">2</li><li style="background-color:orange">3</li></ul><ul><li style="background-color:red">1</li><li style="background-color:blue">2</li><li style="background-color:orange">3</li></ul><ul><li style="background-color:red">1</li><li style="background-color:blue">2</li><li style="background-color:orange">3</li></ul>

总的来说，方法就是在标签结束处消除换行符，或者把换行符添加到标签内部。

2、使用css

空白符也是字符，我们可以把父元素的字体大小设为0，这样空白符也就消失了。

ul{font-size:0px;}

运行结果如下所示：

哈哈！解决问题了。

0 1