如何清除两个inline-block元素之间的默认间隙

最新推荐文章于 2023-07-12 19:19:31 发布

敲代码有瘾

最新推荐文章于 2023-07-12 19:19:31 发布

阅读量498

点赞数 2

本文链接：https://blog.csdn.net/weixin_45786214/article/details/106296384

版权

清除两个inline-block元素之间的默认间隙

最近在做项目时遇见一个问题就是我给一个盒子设置了display：inline-block后，元素之间会有一点默认间隙，后来上网一查，才知道inline-block是有默认间距的，默认间距为4px。下面就说一下我的解决方法：

问题：

	<style>
		.box1{
			width: 800px;
			height: 1000px;
			background-color: black;
		}
		.box1 .innerbox1{
			display: inline-block;
			width: 100px;
			height: 100px;
			background-color: blue;
		}
		.box1 .innerbox2{
			display: inline-block;
			width: 100px;
			height: 100px;
			background-color: pink;
		}
	</style>
<body>
	<div class="box1">
		<div class="innerbox1">第一个子盒子</div>
		<div class="innerbox2">第二个子盒子</div>
	</div>
</body>

以上代码两个盒子之间会有默认间隙
在这里插入图片描述

为什么会出现这样的问题？

html的闭合标签其实是一个换行符，会产生一个空白符，所以在元素之间会产生一个间隙。

解决方法

1.将元素标签都写在同一行，也就是元素不换行

<body>
	<div class="box1">
		<div class="innerbox1">第一个子盒子</div><div class="innerbox2">第二个子盒子</div>
	</div>
</body>

这样就可以完美解决，但是这样会造成页面不美观不方便后期查看代码。

所以我一般用二种方法

2.给父元素设置font-size：0px，然后再给子元素单独设置font-size

	<style>
		.box1{
			width: 800px;
			height: 1000px;
			background-color: black;
			font-size: 0px;
		}
		.box1 .innerbox1{
			display: inline-block;
			width: 100px;
			height: 100px;
			background-color: blue;
			font-size: 14px
		}
		.box1 .innerbox2{
			display: inline-block;
			width: 100px;
			height: 100px;
			background-color: pink;
			font-size: 14px
		}
	</style>
<body>
	<div class="box1">
		<div class="innerbox1">第一个子盒子</div>
		<div class="innerbox2">第二个子盒子</div>
	</div>
</body>

在这里插入图片描述

敲代码有瘾

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何清除两个inline-block元素之间的默认间隙

清除两个inline-block元素之间的默认间隙最近在做项目时遇见一个问题就是我给一个盒子设置了display：inline-block后，元素之间会有一点默认间隙，后来上网一查，才知道inline-block是有默认间距的，默认间距为4px。下面就说一下我的解决方法：问题： <style> .box1{ width: 800px; height: 1000px; background-color: black; } .box1 .innerbox1{
复制链接

扫一扫