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

您可以使用after并应用更改，请参阅此解决方案

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

Answer 3

您的问题是视觉输出的顺序是：   - 外部保证金   - 边界在里面   - 填充在边框内

所以无论你添加多少边距 - 边框都不会改变。边距在边界外。至于填充......它不允许你指定边框两边之间的区域。

我能想到解决这个问题的唯一方法是在代码中添加另一个容器。这样，您可以为两个不同的项目定义边框，并在边框之间留出空间。它还使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;    }