为什么更改跨度的左边距会增加跨度内容框的宽度？

Question

话不多说，来看看：

跨度没有左边距

body {
  background-color: red;
}

span {
  background-color: green;
  margin-left: 0px;
}

<span>text<span>

箱体型号：

跨距为 100px 左边距

body {
  background-color: red;
}

span {
  background-color: green;
  margin-left: 100px;
}

<span>text<span>

箱体型号：

为什么当我将 span 的左边距从 0px 更改为 100px 时，内容框的宽度会发生变化？

Answer 1

*{
    margin: 0;
    padding: 0;
}
body {
    background-color: red;
}

span {
    background-color: green;
}

<span>text</span>