因为浏览器有默认的样式，对P元素的默认样式是：
user agent stylesheet
p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

所以p元素会拥有margin值，而margin是外扩充。

元素的任何内容都会被margin所包裹，包括background，所以你会看到有空隙，

但margin也属于那个元素本身，所以其实本身是已经触顶的。

而padding是内扩充，相当于有棍子把容器给撑开了，然后background继续覆盖，

所以令你感觉上padding值加上了，然后就触顶了。