CSS: inline-block 间隙

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

 

  1. 父元素display: table

  2. 父元素font-size: 0; 子元素重置font-size
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: palegoldenrod;
      display: inline-block;
      word-spacing: 0;
      letter-spacing: 0;
      font-size: 20px;
    }

    section {
      letter-spacing: -3px;
      font-size: 0;
    }

    body {
      font-size: 30px;
    }
  </style>
</head>

<body>
  <section>
    <div class="b1">bbb bb</div>
    <div class="b2">ppp ee</div>
  </section>
</body>

</html>

     

  3. 父元素letter-spacing: -1em;

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

  5. 子元素float
  6. 子元素 HTML结构不换行, 无空格
posted @ 2022-06-18 18:00  ascertain  阅读(79)  评论(0)  编辑  收藏  举报