消除display: inline-block 元素间的换行符空格间隙问题。

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

小白彡不白

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

阅读量977

点赞数 2

分类专栏： html 和css 文章标签： css

本文链接：https://blog.csdn.net/linglingzi001/article/details/103568264

版权

html 和css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

消除display: inline-block 元素间的换行符空格间隙的方法

想把一些元素在一行显示，最简单的方法是display:inline-block;变成行内块元素
但是同行显示的inline-block元素之间会有一个换行符，一般占据4px位置(例如Chrome浏览器字体默认大小16px,行内块元素间隔4px,字体大小越大间隔越大)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.wrap{
				width: 500px;
				height: 500px;
				border: 1px solid red;
				font-size:16px;
			}
			.wrap div{
				display: inline-block;
			}
			.div1{
				width: 100px;
				height: 100px;
				background-color: #f00;
			}
			.div2{
				width: 100px;
				height: 100px;
				background-color: #0f0;
			}
			.div3{
				width: 100px;
				height: 100px;
				background-color: #00f;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="div1">div1</div>
			<div class="div2">div2</div>
			<div class="div3">div3</div>
			<div class="div4"></div>
		</div>
	</body>
</html>

效果：行内块间隔问题

解决行内块间隔的方法：

1.直接去掉换行符或注释换行

<div class="wrap">
	<div class="div1">div1</div><div class="div2">div2</div>
	<div class="div3">div3</div>
	<div class="div4"></div>
</div>

		<div class="wrap">
			<div class="div1">div1</div><!--
			--><div class="div2">div2</div>
			<div class="div3">div3</div>
			<div class="div4"></div>
		</div>

解决方法1
缺点：代码的可读性变差。

2.使用浮动float
缺点：浮动元素会脱离文档流，但是也可以使用清楚浮动解决，清楚浮动下篇再提

3.letter-spacing消除 inline-block 元素间的换行符空格间隙

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.wrap{
				width: 500px;
				height: 100px;
				border: 1px solid red;
				 /*letter-spacing消除 inline-block 元素间的换行符空格间隙问题*/
				letter-spacing: -4px;
			}
			.wrap div{
				display: inline-block;
			}
			.div1{
				width: 100px;
				height: 100px;
				background-color: #f00;
			}
			.div2{
				width: 100px;
				height: 100px;
				background-color: #0f0;
			}
			.div3{
				width: 100px;
				height: 100px;
				background-color: #00f;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="div1">div1</div>
			<div class="div2">div2</div>
			<div class="div3">div3</div>
		</div>
	</body>
</html>

缺点：字体间隔会缩进，如果元素内有字体元素，最好不用这种方法
效果：
在这里插入图片描述
4.为父元素中设置font-size: 0，在子元素上重置正确的font-size

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.wrap{
				width: 500px;
				height: 100px;
				border: 1px solid red;
				font-size: 0;		
			}
			.wrap div{
				display: inline-block;
			}
			.div1{
				width: 100px;
				height: 100px;
				background-color: #f00;
				font-size: 16px;
			}
			.div2{
				width: 100px;
				height: 100px;
				background-color: #0f0;
				font-size: 16px;
			}
			.div3{
				width: 100px;
				height: 100px;
				background-color: #00f;
				font-size: 16px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="div1">div1</div>
			<div class="div2">div2</div>
			<div class="div3">div3</div>
		</div>
	</body>
</html>

缺点：麻烦，代码量多，容易影响到其他样式

5.设置父元素，display:table

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.wrap{
				width: 500px;
				height: 100px;
				border: 1px solid red;
				display: table;
			}
			.wrap div{
				display: inline-block;
			}
			.div1{
				width: 100px;
				height: 100px;
				background-color: #f00;
			}
			.div2{
				width: 100px;
				height: 100px;
				background-color: #0f0;
			}
			.div3{
				width: 100px;
				height: 100px;
				background-color: #00f;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="div1">div1</div>
			<div class="div2">div2</div>
			<div class="div3">div3</div>
		</div>
	</body>
</html>

缺点：影响到父级元素样式

消除display: inline-block 元素间的换行符空格间隙的方法应该还有很多，目前总结我见过的几种
每种方法都有优缺点，使用时应该根据需求选择相应的方法

小白彡不白

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
消除display: inline-block 元素间的换行符空格间隙问题。

消除display: inline-block 元素间的换行符空格间隙的方法想把一些元素在一行显示，最简单的方法是display:inline-block;变成行内块元素但是同行显示的inline-block元素之间会有一个换行符，一般占据4px位置(例如Chrome浏览器字体默认大小16px,行内块元素间隔4px,字体大小越大间隔越大)<!DOCTYPE html><...
复制链接

扫一扫

专栏目录