爲什麼填充不適用於帶有表格的div？

Question

我在這裏有這個簡單的html代碼。我不明白爲什麼在第二個DIV填充沒有顯示？如果我刪除cellpadding和間距，我看到大約10個像素填充，但不是我想要的20px。

爲什麼？

<div style="position: relative; margin: 0 auto; padding: 0 auto; max-width: 860px;"> 
     <div style="border:1px solid #999; padding 20px; margin: 40px 10px; background: red;"> 
      <table cellpadding="0" cellspacing="0" border="0" width="100%"> 
       <tr> 
        <td width="55"> xxx </td> 
        <td style="font-size: 14px;">xxx </td> 
       </tr> 
      </table> 
     </div> 
    </div> 

Answer 1

絕對沒有理由。

你忘記你的`table`的:後padding

<div style="position: relative; margin: 0 auto; padding: 0 auto; max-width: 860px;"> 
    <div style="border:1px solid #999; padding: 20px; margin: 40px 10px; background: red;"> 
     <table cellpadding="0" cellspacing="0" border="0" width="100%"> 
      <tr> 
       <td width="55">xxx</td> 
       <td style="font-size: 14px;">xxx</td> 
      </tr> 
     </table> 
    </div> 
</div> 

See jsfiddle

Answer 2

外部div的填充正在減少內部div的全部填充。外部div的填充是0px auto，意思是填充到中心。嘗試使用外部div的say 2px的填充以查看效果。希望這可以幫助你。

Answer 3

你的外部DIV是問題所在。它將內部DIV中的設置填充最小化。但是，爲什麼不將cellpadding設置爲10px？

Answer 4

您的table的寬度爲其父項的寬度爲100%，該項具有填充。