为什么会有幽灵空白元素，display:inline/inline-block会出现空隙的原因

display: inline-block 样式会在一些情况下产生间隙，这通常是由于元素之间的空白符或换行符所致。具体来说，以下情况可能导致 display: inline-block 元素之间出现间隙：

  1. HTML 源代码中的换行符和空格：如果 display: inline-block 元素之间有换行符或空格，浏览器会将这些空白符解释为文字空间，从而在布局中产生间隙。

    <div class="inline-block-element"></div>
<div class="inline-block-element"></div>

    上面的例子中，如果两个 <div> 元素之间有换行符或空格，就会在页面上显示间隙。

  2. 字体大小不为 0 的父元素：如果父元素的字体大小不为 0（即父元素内包含文字），那么子元素之间也可能出现间隙。这是因为行内块级元素会受到父元素文字基线的影响，导致垂直方向上出现间隙。

要解决这些间隙问题，可以采取以下方法：

  • 去除 HTML 源代码中元素之间的换行符和空格，或者使用 HTML 注释将它们包裹起来，以避免间隙产生。
  • 将父元素的字体大小设置为 0，或者使用其他方法来消除父元素对子元素布局的影响。

例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>幽灵空白元素</title>
  </head>
  <style>
    .parent {
      background: red;
      // font-size: 0;
      // line-height: 0;
    }

    img {
      // vertical-align: middle;
    }
  </style>
  <body>
    <div class="parent">
      <img
        src="https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg"
        width="300"
        height="200"
      />
    </div>
  </body>
</html>

粘贴代码运行后的结果

image

图片底部存在一个间隙，明明页面就只有一个div和img。
原因是行内/行内块级元素会受到父元素文字基线的影响，导致垂直方向上出现间隙。

解决办法

  1. 父元素font-size设置为0，或者line-height为0。
  2. 子元素的vertical-align设置为非baseline的值，比如middle。

vertical-algin仅inline/inline-block生效

在 CSS 中，vertical-align 属性用于控制行内元素或行内块元素在垂直方向上的对齐方式。但是，这个属性仅对行内元素（inline elements）和行内块元素（inline-block elements）生效。对于其他类型的元素（比如块级元素），设置 vertical-align 是不会产生任何效果的。

这是因为块级元素在垂直方向上是按照其父元素的 line-height 属性来对齐的，而不是通过 vertical-align 属性来控制的。vertical-align 属性主要用于调整行内元素在其所在行的垂直对齐方式，比如使得图片与文本的基线对齐，或者垂直居中等。

posted @ 2024-03-01 10:58  脆皮鸡  阅读(392)  评论(0)    收藏  举报