inline-block特性

特征

• 既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
• 又呈现 block 特性 (可设置宽高，内外边距)
• 默认情况下，inline-block元素之间就有空隙出现

缝隙问题

代码如下：

  
  
   



  

    哈哈
    呵呵
  

页面显示为：

inline-block0001.png

可以清楚的看到右侧页面展示哈哈和呵呵两个字之间产生了空隙，缝隙的实质就是元素标签段之间的空格

如何消除缝隙

1.去掉HTML中的空格

inline-block0002.png

2.使用font-size:0；

inline-block0004.png

inline-block元素如何对齐

vertical-align: top ;
以顶端对齐

vertical-align: bottom;
以底部对齐。