为何内部div未包裹span子元素且未继承内容尺寸？

核心原因 #

所有.dot类的span元素都设置了position: absolute，绝对定位的元素会脱离正常文档流，完全不占据父元素的空间。父div在计算自身尺寸时会忽略这些脱离流的子元素，最终尺寸变成0，看起来就像没有包裹子元素。

和span元素无关 #

这个问题和span本身没有关系——哪怕把span换成div，只要设置了position: absolute，父元素一样不会被撑开。

解决方案 #

如果需要让内部div显示出包裹子元素的尺寸，有两种可行方式：

1. 给内部div设置固定尺寸：这些绝对定位的span是以内部div作为定位基准的，直接给div加上和.face一致的尺寸即可，不会影响点的布局：

.inner-dot-container {
  width: var(--side_length);
  height: var(--side_length);
  position: absolute;
}

对应的HTML修改为：

<div class="face">
  <div class="inner-dot-container">
    <span class="dot dot1"></span>
    <span class="dot dot2"></span>
    <span class="dot dot3"></span>
    <span class="dot dot4"></span>
    <span class="dot dot5"></span>
    <span class="dot dot6"></span>
    <span class="dot dot7"></span>
    <span class="dot dot8"></span>
    <span class="dot dot9"></span>
  </div>
</div>

2. 改用非绝对定位的布局方式：去掉span的position: absolute及相关top/left属性，用Flexbox或Grid来排列这些点，让子元素留在文档流中，父div会自动被撑开。比如用Grid布局可以更简洁实现骰子点排列：

.dot-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: var(--side_length);
  height: var(--side_length);
}
.dot {
  background: #FFF;
  height: calc(var(--side_length) * var(--dot_ratio));
  width: calc(var(--side_length) * var(--dot_ratio));
  border-radius: 50%;
  margin: auto;
}

内容的提问来源于stack exchange，提问作者sharpnife