.demo{
 width: 300px;
 height: 200px;
 padding: 300px;
 border: 5px solid blue;
 margin: 20px;
 background: #fee;
 box-sizing: border-box;
}
<div class="demo">
内边距区域padding area 用内容及可能的边框之间的空白区域扩展内容区域。它位于内边距边界内部，通常有背景——颜色或图片（不透明图片盖住背景颜色）. 它的大小为 padding-box  宽与 padding-box 高。
内边距与内容边界之间的空间可以由 padding-top, padding-right, padding-bottom, padding-left 和简写属性 padding 控制。
边框区域border area 是包含边框的区域，扩展了内边距区域。它位于边框边界内部，大小为 border-box  宽和 border-box 高。由 border-width 及简写属性 border控制。
外边距区域margin area用空白区域扩展边框区域，以分开相邻的元素。它的大小为  margin-box 的高宽
</div>

在这个例子中，文字会向下溢出content area部分到padding部分，不知道原因百思不得其解啊