浅谈CSS中的之间的空白间隔问题

问题:

有时候,我们需要将<li>横向排列,而又为了能设置其宽度和高度,为其设置display:inline-block,相邻<li>之间会出现8px的空白间隔,不是margin也不是padding。

<html>
	<head>
		<title>demo</title>
		<style type="text/css">
		* {
			margin:0;
			padding:0;
		}
		li {
			width:100px;
			height:100px;
			display:inline-block;
			list-style:none;
		}
		#li1 {
			background:red;
		}
		#li2 {
			background:blue;
		}
		#li3 {
			background:yellow;
		}
		#li4 {
			background:black;
		}
		</style>
	</head>
	<body>
		<ul>
			<li id="li1"></li>
			<li id="li2"></li>
			<li id="li3"></li>
			<li id="li4"></li>
		</ul>
	</body>
</html>



原因:

浏览器会把inline元素间的空白字符(空格、换行、Tab等)渲染成一个空格。而为了美观。我们通常是一个<li>放在一行,这导致<li>换行后产生换行字符,它变成一个空格,占用了一个字符的宽度。

解决:

方法一:为<li>设置float: left。不足:有些容器是不能设置浮动,如左右切换的焦点图等。

方法二:将所有<li>写在同一行。不足:代码不美观。

方法三:将<ul>内的字符尺寸直接设为0,即font-size: 0。不足:<ul>中的其他字符尺寸也被设为0,需要额外重新设定其他字符尺寸,且在Safari浏览器依然会出现空白间隔。

方法四:消除<ul>的字符间隔letter-spacing: -8px,而这也设置了<li>内的字符间隔,因此需要将<li>内的字符间隔设为默认letter-spacing: normal 

展开阅读全文
©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值