CSS滚动条，尽管div高度+边距加起来高达100%

Question

• 我不知怎么弄丢了我在这里做错了什么：

• 我得到了一个简单的内容<div>。

• 它具有100% - 30px的height和30px的margin-top。。。因此它们加在一起等于父元素高度的CCD_ 6。

• 父元素是CCD_ 7被设置为CCD_。没有边距，没有填充。

• 然而，我仍然在右边有一个y滚动条。有人能向我解释一下为什么？

我在这里举了一个最小的例子来说明我的意思：https://jsfiddle.net/kemo8npa/4/

有人能向我解释一下为什么我会得到滚动条吗？

html {
margin: 0;
padding: 0;
}
body {
height: 100vh;
margin: 0;
padding: 0;
background-color: purple;
}
.content {
height: calc(100% - 30px);
margin-top: 30px;
background-color: blue;
width: 300px;
}

<div class="content">
content
</div>

编辑：将示例更改为更精简。

Answer 1

.inner的margin-top在元素外添加了30px，因此总和再次为100%高度。

您可以使用padding-top。