2022-09-02 为什么li标签和li标签中间会出现空白?多个a标签中间的空隙如何消除?如何处理行内块元素之间的空白间隙?

1.什么是行内块元素?

元素设置display:inline-block可以变成行内块元素,它有这样的特点:
既可以设置宽高,但是不会独占一行,也就是既有块级元素可以设置宽高的功能,也有行内元素不换行的功能

2.为什么行内元素之间会出现空白间隙?

问题示例

    #container>*{
      width: 350px;
      height: 250px;
      display: inline-block;
    }
    .left{
      background: pink;
    }
    .center{
      background: blue;
    }
    .right{
      background: green;
    }

效果:

出现原因

浏览器的默认行为是把inline元素间的空白字符（空格,换行或tab）渲染成一个空格，
也就是换行后会产生换行字符，最终变成一个空格，占用一个字符的宽度。
也就是说不仅仅是行内块元素,行内元素之间也会产生空白字符,
常见的是横向排列的li标签也会出现空隙,多个a标签之间也会出现间隙

3.解决方法

3.1.方法一:html中行内标签写在同一行中,不换行

接上例,下同

<div id="container">
   <div class="left"></div><div class="center"></div><div class="right"></div>
</div>

3.2.方法二:改变html中行内标签换行的字符

原先是完整写完一个标签然后换行:

<div id="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

现在改成在">"处换行:

<div id="container">
  <div class="left"></div
  	><div class="center"></div
  		><div class="right"></div>
</div>

3.3.方法三:在行内标签之后使用注释

<div id="container">
  <div class="left"></div><!-- 注释
   --><div class="center"></div><!-- 注释
  --><div class="right"></div><!-- 注释 -->
</div>

3.4.方法四:设置行内元素的水平margin值为负值

 #container>*{
   width: 350px;
   height: 250px;
   display: inline-block;
   margin-left:-0.333333em;
 }

3.5.方法五:给行内元素的父元素设置font-size:0

#container{
  font-size:0;
}

3.6.方法六:父元素的letter-spacing设置为负值

#container{
	letter-spacing: -0.333333em;
}
/*与font-size一样，改变letter-spacing时,
会改变内部子元素的间隙，需要在子元素内手动进行矫正。*/
#container>*{
	letter-spacing: 0;
}

3.7.方法七:给行内元素设置浮动

#container>*{
	float:left;
}