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

最新推荐文章于 2023-01-15 20:27:20 发布

午夜星光

最新推荐文章于 2023-01-15 20:27:20 发布

阅读量3.9k

点赞数 2

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

本文链接：https://blog.csdn.net/annsheshira23/article/details/47760363

版权

css 专栏收录该内容

7 篇文章 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，这样空白符也就消失了。

ul{
	font-size:0px;
}

运行结果如下所示：

哈哈！解决问题了。

午夜星光

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
解决inline-block引起的空白间距问题

当我们在对元素的display属性使用inline-block值时，会在元素间形成一定宽度的空白间距。下面看一下源代码：inline-blockli{display:inline-block;width:100px;height:100px;border-radius:1em;padding:10px;}123页面效果如下图所示：
复制链接

扫一扫

专栏目录