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=