html导航的边距和填充差异

Question

我正在关注简单的html5导航教程，这是html

   <nav>         
     <ul>
       <li><a href="#"  >Home</a></li>
       <li><a href="#" >About</a></li>
       <li><a href="#" >Grind</a></li>
       <li><a href="#" >Contact</a> </li>
     </ul>

   </nav>

和css就像这样

   nav ul li a {
               display:block; 
               padding:10px 0px 10px 25px; 
               color:#FFF; 
               text-decoration:none;
               background:#333; 
               font-size:16px; 
               margin:0px 0px 5px 0px;
              }      

输出

现在我的问题是li a padding is effective for text inside block和margin is effective for whole block底部边距意味着“完整主页块”的底部边距为：5px。为什么填充在块内影响并且边缘在块外有效？请任何人都明白这一点吗？