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 пикселей.

100% от 900px - это 900. Если вы примените 16-пиксельное заполнение к левому и правому краям, это добавит 32 пикселя. Если вы примените границу 1 пиксель, это еще 2 пикселя. Если вы добавите 10-пиксельное поле слева и справа, это будет еще 20 пикселей.

Когда вы сложите все это, ширина вашего элемента будет:

900 + 32 + 2 + 20 = 954

обновление
Если у вас есть элемент уровня блока (display: block), вам не нужно указывать ширину как 100%. Если вы укажете, что у него есть определенные отступы, поля и границы, то ширина будет занимать оставшееся пространство (width: auto).