浅谈CSS中的<li>之间的空白间隔问题_css加8px空格-优快云博客

本文链接：https://blog.youkuaiyun.com/muzidigbig/article/details/83747736

问题：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</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>

原因：

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

解决：

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

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

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

方法四：为<li>设置margin-left-8px;这时候你会发现第一个<li>会向左移-8px显示的不是很全。不足：还要重新设置第一个li距离左侧的距离。

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

        ul{
            letter-spacing: -8px;
        }
	li {
	    width:100px;
	    height:100px;
	    display:inline-block;
	    list-style:none;
            letter-spacing: normal;
	}