CSS: inline-block 间隙


当使用行内元素进行排版的时候,元素之间的符号采取一个都不放过的原则,通通都会都浏览器渲染,其中就包括换行符和空格,这两个极易被我们忽视的符号也会被浏览器渲染。,根据white-space的处理方式(默认是normal,合并多余空白)会将HTML中回车换行符转换成空白符,在字体不为空的情况下,会占据一定的空间,这就形成了我们所看到的inline-block元素之间的空隙。空隙的大小由字体大小决定,当行内元素font-size:16px时,间距为8px。

  1. 父元素display: table

  2. 父元素font-size: 0; 子元素重置font-size
    
    "en">
    
    
      "UTF-8">
      "X-UA-Compatible" content="IE=edge">
      "viewport" content="width=device-width, initial-scale=1.0">
      Document
      
    
    
    
      
    class="b1">bbb bb
    class="b2">ppp ee
  3. 父元素letter-spacing: -1em;

  4. 父元素word-spacing: -1em;

  5. 子元素float
  6. 子元素 HTML结构不换行, 无空格

相关