CSS - Создать разрыв между границами?

Question

Fiddle - http://jsfiddle.net/8t6g6jeq/1/

Так я думал, что я смогу добиться этого с запасом. Границы, похоже, не применяются к верхней границе, но они применимы к нижней границе? Вот как это выглядит, и я добавил дополнение, чтобы сгустить область с кликом, сохраняя элемент в центре.

margin: 5px 0; 
padding: 10px 0; 

Трудно описать то, что я хочу, чтобы мой результат, так что я нарисовал это в красках:

Я растерялся и почти стыдно, что я не могу это сделать ... Любая помощь было бы замечательно.

Спасибо!

* Изменить - После применения границы к моим пролетам, похоже, то же самое относится и к верхним полям.

Answer 1

можно моделировать границу с пустым элементом с: после

#nav span:after{ 
    content: ''; 
    background: black; 
    position: absolute; 
    bottom: 5px; 
    width: 2px; 
    height: 20px; 
    right: -10px;  
} 

очень черновика: http://jsfiddle.net/8t6g6jeq/2/

Answer 2

Вы можете использовать после того, как и применить изменения, см этого решения

http://jsbin.com/valufajina/5/edit

Answer 3

Ваша проблема заключалась в том, что порядок визуального вывода: - margin на ou tside - граница внутри. - прокладка находится внутри границы

, так что независимо от того, насколько вы добавите границу, границы не изменятся. Поля - Наружные границы. А что касается прокладки ... это не позволит вам указать область между двумя краями границы.

Единственный способ, которым я могу решить это, - добавить еще один контейнер в свой код. Таким образом, вы можете определять границы для двух разных элементов и иметь пространство между границами. Он также делает CSS очень чистым и маленьким.

Я изменил свою скрипку, чтобы содержать следующий HTML:

<div id="nav"> 
    <div> 
     <span class="active">Nav Item</span> 
     <span>Nav Item</span> 
    </div> 
    <div> 
     <span>Nav Item</span> 
     <span>Nav Item</span> 
    </div> 
    <div> 
     <span>Nav Item</span> 
     <span>Nav Item</span> 
    </div> 
    <div> 
     <span>Nav Item</span> 
     <span>Nav Item</span> 
    </div> 
</div> 

И следующий CSS:

#nav { 
    width: 300px; 
    margin: 0 auto; } 

#nav div { 
    padding: 10px 0; 
    border-bottom: 1px solid #333;  } 

#nav span { 
    color: #D3D3D3; 
    font-size: 13px; 
    text-align: center; 
    cursor: pointer; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font: normal 13px arial; 
    display: inline-block; 
    width: 145px; } 

#nav div span:first-child { 
    border-right: 1px solid #333; } 

#nav span:hover, #trendNav span.active { 
    font-weight: bold; 
    color: #333; }