Странное поведение CSS - диагональная граница - почему граница границы не прямая?

Question

Я хочу добавить белый промежуток между элементами меню, но Im сталкивается с какой-то странной проблемой. Смотрите эту jfiddle: http://jsfiddle.net/ERYat/1/

Вот код CSS:

/* a styling */ 
ul#menu-menu-services a { 
    display: block; 
    font-size: 20px; 
    color: #000; 
    text-decoration: none; 
    padding: 5px; 
    border-bottom: 2px solid #fff; 
    border-left-style: solid; 
    border-left-width: 3px; 
    border-left-color: #000; 
} 
/* li fix */ 
ul#menu-menu-services li { 
    margin: 0; 
    padding: 0; 
    border: none; 

} 

/* Sub Menu */ 
ul#menu-menu-services li ul.sub-menu { 
    display: block; 
    margin-left: 0px; 
} 

ul#menu-menu-services li ul.sub-menu li a { 
    padding-left: 15px; 
    font-size: 14px; 
} 

Я не могу понять, почему граница диагонали слева. Кто-нибудь знает?

Answer 1

границы приходят вместе, как это:

|| 
||______ 
|/______ 

Вы должны использовать margin-bottom вместо border-bottomfiddle:

ul#menu-menu-services a { 
display: block; 
font-family: 'Droid Sans', arial, serif; 
font-size: 20px; 
color: #000; 
text-decoration: none; 
padding: 5px; 
margin-bottom: 2px; 
border-left-style: solid; 
border-left-width: 3px; 
border-left-color: #000; 
} 

И если вам нужна белая линия, считают using :after:

ul#menu-menu-services a { position: relative; } 
ul#menu-menu-services a:after { 
    content: ''; 
    width: 100%; 
    position: absolute; 
    height: 2px; 
    background: #fff; 
    left: 0; 
    bottom: -2px; 
} 

Answer 2

Это потому, что он рисует угол двух границ. Попытайтесь изменить свою нижнюю границу на нечто, отличное от белого, и вы увидите более четко, что он делает.

Чтобы избавиться от этого эффекта, вам необходимо избавиться от нижней границы.

Если вам нужен промежуток, который дает вам нижняя граница, вы можете использовать padding-bottom или margin-bottom.