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

最新推荐文章于 2022-07-06 20:17:54 发布

YinghaoGuo

最新推荐文章于 2022-07-06 20:17:54 发布

阅读量1k

点赞数

分类专栏： css篇文章标签： css inline-block引起的间距

css篇专栏收录该内容

9 篇文章 0 订阅

订阅专栏

当我们在对元素的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，这样空白符也就消失了。