神奇的css显示问题前两天在线上遇到一个特别奇怪的样式，就是卡片下的span标签明明显示size是0x0，但是就是占据了

前两天在线上遇到一个特别奇怪的样式，就是卡片下的span标签明明显示size是0x0，但是就是占据了一大块空间，就像这样

线上的代码类似这样

 <style>
      .box {
        width: 500px;
        position: relative;
      }

      .box::after {
        display: block;
        content: '';
        position: relative;
        width: 100%;
        background: red;
        padding-bottom: 100%;
      }

      .box-inner {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="box-inner"></span>
    </div>
  </body>

效果如图

一开始还以为是因为box-inner为inline-block而导致行内元素对齐有问题，于是用vertical-align进行尝试，有用是有用，但是无法复原：

vertical-align为正值

vertical-align为负值

查询mdn也没结果，于是开始用chatgpt问，

于是尝试设置font-size为0

 <style>
      .box {
        width: 500px;
        font-size:0;
        position: relative;
      }

      .box::after {
        display: block;
        content: '';
        position: relative;
        width: 100%;
        background: red;
        padding-bottom: 100%;
      }

      .box-inner {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="box-inner"></span>
    </div>
  </body>

卧槽居然好了？！！！