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; }