Div not containing span-CodePudding

The inner div (secondary div) apparently doesn't contain the inner span tags when inspected using the dev tools. From what I've learned the divs automatically inherit the size (height and width) of the content inside the div, but in this case it's not happening. What's the reason? Are span tags the issue?

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

codepen.io

CodePudding user response：

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 >
  <div >
    <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>