Div does not appear to contain (enclose) its span element children

Issue

The inner div does not appear to contain (enclose) its span element children when inspected using dev tools. From what I've learned, a div automatically inherits the size (height and width) of the content inside that div, but in this case it's not happening. Why not? Is it something to do with the span elements?

:root {
  --side_length: 200px;
  --dot_ratio: 0.15;
}

.dice {
  position: relative;
  margin: 0;
  perspective: 1000px;
  perspective-origin: 50% 100%;
}

.dot {
  background: #FFF;
  height: calc(var(--side_length) * var(--dot_ratio));
  width: calc(var(--side_length) * var(--dot_ratio));
  border-radius: 50%;
  display: inline-block;
}

.dot1 {
  position: absolute;
}

.dot2 {
  position: absolute;
  left: calc((var(--side_length) - (var(--side_length) * var(--dot_ratio))) * 0.5);
}

.dot3 {
  position: absolute;
  left: calc(var(--side_length) - (var(--side_length) * var(--dot_ratio)));
}

.dot4 {
  position: absolute;
  top: calc((var(--side_length) - (var(--side_length) * var(--dot_ratio))) * 0.5);
}

.dot5 {
  /* (side_length - height) / 2 */
  position: absolute;
  top: calc((var(--side_length) - (var(--side_length) * var(--dot_ratio))) * 0.5);
  left: calc((var(--side_length) - (var(--side_length) * var(--dot_ratio))) * 0.5);
}

.dot6 {
  position: absolute;
  top: calc((var(--side_length) - (var(--side_length) * var(--dot_ratio))) * 0.5);
  left: calc(var(--side_length) - (var(--side_length) * var(--dot_ratio)));
}

.dot7 {
  position: absolute;
  top: calc(var(--side_length) - (var(--side_length) * var(--dot_ratio)));
}

.dot8 {
  position: absolute;
  top: calc(var(--side_length) - (var(--side_length) * var(--dot_ratio)));
  left: calc((var(--side_length) - (var(--side_length) * var(--dot_ratio))) * 0.5);
}

.dot9 {
  position: absolute;
  top: calc(var(--side_length) - (var(--side_length) * var(--dot_ratio)));
  left: calc(var(--side_length) - (var(--side_length) * var(--dot_ratio)));
}

.face {
  height: var(--side_length);
  width: var(--side_length);
  margin: 0;
  background: #000;
}

<div class="face">
  <div style="position: absolute;">
    <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>

codepen.io

Solution

See: https://developer.mozilla.org/en-US/docs/Web/CSS/position

In particular, it says:

position: absolute -- The element is removed from the normal document flow, and no space is created for the element in the page layout.

If you change <span> to <p>, you will see the same problem. Put a coloured border on the inner div to see where it appears.

Using position: absolute to position each element individually is a very complicated way to approach this problem.

I would suggest using flexbox (you could also use gridbox).

Add a container class to the inner div. I added a red border to it so that you can see that the inner container div expands to surround the <span> children, i.e. the white circles.

There are many ways to position the circles.

For example:

:root {
    --side_length: 200px;
    --dot_ratio: 0.15;
}

.dice {
    position: relative;
    margin: 0;
    perspective: 1000px;
    perspective-origin: 50% 100%;
}

.dot {
    background: #FFF;
    height: calc(var(--side_length) * var(--dot_ratio));
    width: calc(var(--side_length) * var(--dot_ratio));
    border-radius: 50%;
    margin: 17px;  
}

.sub-face {
    position: absolute;
}

.face {
    height: var(--side_length);
    width: var(--side_length);
    margin: 0;
    background: #000;
}

.container {
  border: solid 3px red;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

<div class="face">
  <div class="container">
    <span class = "dot"></span>
    <span class = "dot"></span>
    <span class = "dot"></span>
    <span class = "dot"></span>
    <span class = "dot"></span>
    <span class = "dot"></span>
    <span class = "dot"></span>
    <span class = "dot"></span>
    <span class = "dot"></span>
  </div>
</div>

Answered By - PeterJames