inline-block 排列的中间间隙问题

最新推荐文章于 2023-07-24 11:52:16 发布

镇长1998

最新推荐文章于 2023-07-24 11:52:16 发布

阅读量376

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_41514525/article/details/90247422

版权

web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

两个inline-block的块没有设置外边距但却有着中间的缝隙。。。。。。。

对于两个inline-block 同一行的时候，会出现间隙。

对于这个间隙可以通过去掉将HTML中两个块对应的代码中间的空格来去除两个块中的间隙

<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="UTF-8">
		<title>inline-block</title>
	</head>
	<style type="text/css">
		
		.box1{
			width: 200px;
			height: 200px;
			background: green;
			display: inline-block;
		}
		
		.box2{
			 width: 200px;
			 height: 200px;
			 background: red;
			 display: inline-block;
		}
		
	</style>
	
	<body>
		
	 <div class="box">
	 	
	 	<div class="box1"></div><div class="box2"></div>   <!--这里看这一行，两个div中间没有空格-->
	 	
	 </div>
	
	</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

镇长1998

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
inline-block 排列的中间间隙问题

两个inline-block的块没有设置外边距但却有着中间的缝隙。。。。。。。对于两个inline-block 同一行的时候，会出现间隙。对于这个间隙可以通过去掉将HTML中两个块对应的代码中间的空格来去除两个块中的间隙<!DOCTYPE html><html> <head> <meta charset="UTF-8"&g...
复制链接

扫一扫