CSS - 創建邊界之間的差距？

Question

小提琴 - 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

您的問題是，視覺輸出的順序是： - 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; }