消除span之间的空隙

最新推荐文章于 2024-07-03 11:37:41 发布

wangguangrong

最新推荐文章于 2024-07-03 11:37:41 发布

阅读量2.7k

点赞数 1

分类专栏： H5 文章标签： span空隙删除span空隙 css html 消除span空隙

本文链接：https://blog.csdn.net/wangguangrong/article/details/116527257

版权

H5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

消除span之间的空隙

1 span之间产生间隙的原因：
span与span标签之间的空格或换行造成的
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>消除空隙</title>
		<style type="text/css">
			div {
				border:1px solid black;
				width: 500px;
			}
			span {
				font-size: 26px;
				display: inline-block;
				width: 100px;
				height: 40px;
				background: red;
			}
			span:nth-child(even) {
				background-color: hotpink;
			}
			span:nth-child(odd) {
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
		</div>
	</body>
</html>

2 解决办法之一
把产生间隙的span标签置于一行，并且之间不留空格
在这里插入图片描述

<div>
	<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>

3 解决办法之二
在span的父级设置字体font-size为0
由于font-size有继承性，把span的父级字体font-size为0后，span也会继承到0，所以对span要重新设置font-size的值。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>消除空隙</title>
		<style type="text/css">
			div {
				/* 父级设置font-size为0 */
				font-size: 0;
				border:1px solid black;
				width: 500px;
			}
			span {
				font-size: 26px;
				display: inline-block;
				width: 100px;
				height: 40px;
				background: red;
			}
			span:nth-child(even) {
				background-color: hotpink;
			}
			span:nth-child(odd) {
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
		</div>
	</body>
</html>

4 另外再介绍两种最渣男渣女的解决办法
(1)使用注释

<div>
	<span>1</span><!-- 
	--><span>2</span><!-- 
	--><span>3</span><!-- 
	--><span>4</span><!-- 
	--><span>5</span>
</div>

（2）margin属性值为负数
这实在是太渣了，我写不下去了，如果你也是渣人，你自已试试吧！

wangguangrong

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录