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

清除两个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>

在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读