为何用span作为容器时UI超出视口？CSS/HTML计时组件问题

我正尝试使用基础CSS和JSX/HTML开发计时组件，困惑于为何用span作为容器时UI会超出视口。我知道应使用div替代，但想了解导致该问题的确切原因。另外我明白这与display: inline属性有关，改为inline-block后可正常显示，但不清楚具体遗漏的细节。

代码示例 #

CSS #

html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
}

.clock-container {
  background-color: black;
  border: 6px solid rgb(158, 158, 158);
  border-radius: 5px;
  padding: 20px;
  color: white;
}

HTML #

<span class="clock-container">
      <span class="time">00</span>
      <span>:</span>
      <span class="time">00</span>
      <span>:</span>
      <span class="time">00</span>
    </span>

原因解析 #

• inline元素的盒模型特性限制：span默认是display: inline元素，这类元素的宽度完全由内部内容决定，且不会自动换行。虽然它的padding、border会占据空间，但这些样式不会改变inline元素的行高布局逻辑——上下方向的padding和border会"溢出"到当前行的外部，左右方向的则会挤压相邻内容；当父容器（比如body）宽度不足时，inline元素不会像block元素那样自动收缩或换行，而是会持续横向延伸，最终超出视口范围。

• inline-block解决问题的核心：改为display: inline-block后，元素同时具备了两类特性：既保留了inline元素"可与其他元素同行显示"的能力，又拥有了block元素"完整计算盒模型空间"的特性。它会像block元素一样，把padding、border的空间纳入自身宽度计算，且当内容宽度超过父容器时，会根据情况自动调整或换行，不会无限制延伸导致溢出。

• 对应你的代码场景：.clock-container设置了padding:20px和border:6px，这些值在inline元素下会被计算，但不会触发元素的换行或收缩逻辑，当视口宽度较小时，整个span容器无法自适应调整宽度，就会出现UI超出视口的问题。而换成div（默认block）或改为inline-block后，元素会正确处理这些内外边距的空间，自然不会溢出。

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