html/css：請幫忙解釋一下這個填充

Question

在這裏學習html/css。我想一個底部邊框添加到我的.menu ul li ul li

.menu ul li ul li{ 
padding:0; 
float:none; 
margin:0 0 0 0px; 
width:100%; 
border-bottom: 1px solid #911; 
} 

但邊界被切斷右邊，因爲在這種風格的右填充的：

.menu ul li ul{ 
position:absolute; 
right: 0px; 
border:1px solid #911; 
/*box-shadow*/ 
-webkit-box-shadow:0 1px 5px #CCCCCC; 
    -moz-box-shadow:0 1px 5px #CCCCCC; 
     box-shadow:0 1px 5px #CCCCCC; 
margin-top:0px; 
display:none; 
padding:0px 16px 0px 0px; 
} 

我感到困惑爲什麼需要16px的正確填充...當我刪除正確的填充時，我的下拉菜單不再正確顯示（邊框關閉，當您下拉菜單時，它向右擴展並導致滾動條出現） 。

此外，在下拉菜單的左下角邊框上還有缺失的空間，爲什麼會出現這種情況？

http://jsfiddle.net/vJaaR/

由於一噸！我非常感謝任何見解。

Answer 1

如果您使用100％的寬度並且還應用邊框，填充或邊距，則您的內容將大於100％。

例如，如果您的頁面寬度爲900像素寬。

900px的100％爲900. 如果在左右兩側都應用16像素填充，則會添加32個像素。 如果您應用1像素邊框，那是另外2個像素。 如果您左右添加10個像素邊距，那是另外20個像素。

當你說起來，你的元素的寬度將是：

900 + 32 + 2 + 20 = 954

更新
如果有塊級元素（display: block ），你不需要指定寬度爲100％。如果您告訴它具有特定的填充，邊距和邊框，則該寬度將佔據該空間的其餘部分（width: auto）。