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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhouziyu2011/article/details/59057780

问题:

有时候,我们需要将<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 

展开阅读全文

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