inline-block

float和display：inline-block区别

float

Float 经常用于实现文字环绕图片

img {
  float: right;
  margin: 0 0 1em 1em;
}

文字环绕图片

display：inline-block

• vertical-align 属性会影响到 inline-block 元素。

  vertical-align 默认为baseline，底部文字对齐，一般需要设置为top。

• 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙。

  如何去除间隙：

  <div class="space">
    <a href="##">
     test</a><a href="##">
     test</a><a href="##">
     test</a>
  </div>
  

  <div class="space">
    <a href="##">test</a
    ><a href="##">test</a
    ><a href="##">test</a>
  </div>
  

  <div class="space">
    <a href="##">惆怅</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">热血</a>
  </div>