CSS 去除两个span之间的默认间距

文章类型:CSS

发布者:hp

发布时间:2022-08-08

在实际开发中，会遇到两个span标签横向排列时，会有几个px间隔，如图所示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span{
				display: inline-block;
				width: 100px;
				height: 30px;
				line-height: 30px;
				text-align: center;
			}
			span:first-child{
				background: lightblue;
			}
			span:last-child{
				background: salmon;
			}
		</style>
	</head>
	<body>
	<div>
		<span>1</span>
		<span>2</span>
	</div>
	</body>
</html>

但是我们代码块没有编写间距。每个span元素间都会存在默认的空格,大楷4像素样子

第一种解决方案，将父元素font-size为0px，子元素重新设置字体可以解决

<style>

          div{
			font-size: 0;
		}

			span{
				font-size: 14px;
				display: inline-block;
				width: 100px;
				height: 30px;
				line-height: 30px;
				text-align: center;
			}
			span:first-child{
				background: lightblue;
			}
			span:last-child{
				background: salmon;
			}
		</style>

第二种方案采取移除掉掉text 空格方案

document.querySelector("div").childNodes.forEach(item=>{ if(item.nodeName=='#text'){item.remove()}   })

上一篇css 文本超出2行就隐藏并且显示省略号

下一篇js中常见判断空对象的几种方法