HTML/CSS : please help explain this padding to me

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

更新
如果您有 block 级元素 (display: block)，则无需将宽度指定为 100%。如果您告诉它具有特定的内边距、边距和边框，那么宽度将占据剩余的空间 (width: auto)。