关于css的浮动问题

Question

  li{
    list-style: none;
    float: left;
  }
  li{
    list-style: none;
    display: inline-block;
  }
  
      <li><img src="1.jpg" height="350" width="500"></li>
      <li><img src="2.jpg" height="350" width="500"></li>
      <li><img src="3.jpg" height="350" width="500"></li>

用 display: inline-block; 会在图片中间存在空隙 , float: left; 就没有 .

为什么会这样 ?

Answer 1

应该是li之间的回车换行符造成的。你可以这样测试下。<li><img src="1.jpg" height="350" width="500"></li><li><img src="2.jpg" height="350" width="500"></li>

Answer 2

display:inline-block  这个默认的会有间隙，在inline-block使用处设置font-size：0应该能解决这个问题

Answer 3

<li>标签，是块级元素。但你使用display:line-block;时。<li>标签变成了内联元素。然后图片就水平排列了，这时候图片之间会存在空隙，然后你又用浮动：float:left: 使他们脱离文档流了，所以就不会有空隙了。请采纳！