关于行内块元素和行内元素标签之间出现缝隙的问题

叫兽~~

已于 2022-04-23 20:30:22 修改

阅读量372

点赞数

文章标签：前端

于 2022-04-23 20:19:41 首次发布

本文链接：https://blog.csdn.net/m0_55557411/article/details/124368389

版权

在使用行内元素，行内块元素时，存在默认的间隙。清除浏览器默认样式对它没用

代码：

<style>
	div div:first-child{
		display: inline-block;
		height: 100px;
		border: 1px solid red;
		width: 100px;
	}
	div div:last-child{
		display: inline-block;
		height: 100px;
		border: 1px solid red;
		width: 100px;
	}
</style>

<body>
	<div>
		<div>行内块1</div>
		<div id="hh">行内块1</div>
	</div>
</body>

百度后发现是：行内标签元素，行内块元素之间的换行带来的影响。只要解决了换行的问题，也就解决了有间隙的问题。

解决方案：

<body>
       // 方法一：
		<div>行内块1</div><div>行内块1</div>

       // 方法二：
		<div>行内块2</div
		><div>行内块2</div>



       // 方法三：
		<div>
		行内块3</div><div>
		行内块3</div>
	

       // 方法四   使用此方法，会看不到里面的文字
	   <div style="font-size:0px">
		  <div>行内块4</div>
		  <div>行内块4</div>
	   </div>

</body>