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）。