html中设置了table的内边距，表格内的caption为什么不跟随表格移动？

html

 <article>
   <table>
    <caption>The Arrangement</caption>
    <thead>
     <tr>
      <th>Date</th>
      <th>Location</th>
      <th>Topic</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <th>2017.06.01</th>
      <th>teaching building 001</th>
      <th>decilious food</th>
     </tr>
     <tr>
      <th>2017.06.06</th>
      <th>ocean building 201</th>
      <th>hometown</th>
     </tr>
     <tr>
      <th>2017.07.02</th>
      <th>swimming pool</th>
      <th>how to swim</th>
     </tr>
     <tr>
      <th>2017.08.30</th>
      <th>meeting room</th>
      <th>learn English</th>
     </tr>
    </tbody>
   </table>
  </article>

css

 article{
    margin-top:.5em;
    color:#000000;
    background-color:#FFFFFF;
    width:100%;
    height:60em;

}
table{
    margin:0 auto;
    padding-top:5em;
}

设置效果如下

caption标签是在表格之外的，你把表格加上边框，就可以看出来了。
建议在外用一个div标签，设置div的属性

参考资料：
http://www.w3chtml.com/html/tag/caption.html

你也可以给table设置margin-top:5em，而不是padding-top