如何去除inline-blcok元素间隙？

春晨秋遇

于 2019-12-06 10:24:00 发布

阅读量235

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/gypzp/article/details/103417616

css 专栏收录该内容

4 篇文章

订阅专栏

本文详细解析了HTML中inline-block元素产生间隙的原因，并提供了多种有效的解决方案，包括调整子元素布局、应用浮动、利用注释技巧及调整字体大小，帮助开发者解决网页布局难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

空隙产生原因：HTML中的换行符、空格符、制表符等空白符，字体大小不为0的情况下，空白符占据一定宽度，使用inline-block会产生元素间的空隙。

相信大家都遇到过这种情况 , 那么怎么解决呢 ?

解决办法：

把所有的子元素写在一行；
子元素设置浮动；
父元素的font-size设置为0，子元素的font-size设置为实际大小；
使用注释：

//使用注释情况如下:
<style>
	.child {
		display: inline-block;
	}
</style>

<div class="parent"> 
	&emsp;&emsp;&emsp; <div class="child"></div><!--
	&emsp;&emsp;--><div class="child"></div><!--
	&emsp;&emsp;--><div class="child"></div><!--
	&emsp;&emsp;--><div class="child"></div>
</div>

怎么样 ? 赶快试试吧 !