CSS-在边框之间创建间隙？

小提琴-

所以我想我能以一定的优势实现这一点。边框似乎不适用于顶部边距，但它们确实适用于底部边距？这就是它看起来的样子，我添加了填充来加厚可点击区域，同时保持元素居中

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

很难描述我想要什么样的结果，所以我画了这个：

我很慌乱，几乎尴尬，我不能这样做。。。任何帮助都会很好

谢谢

---

*编辑-将边框顶部应用到我的跨距后，似乎顶部边距也是如此。

您可以使用：After模拟带有空元素的边框

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

---

非常粗略的草稿：

您可以在更改后使用并应用更改，请参考此解决方案

---

您的问题是视觉输出的顺序是： -外缘 -边界在里面 -填充物在边框内

因此，无论你增加多少利润，边界都不会改变。边距在边界之外。至于填充。。。它不允许您指定边界两条边之间的区域

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

---

你真的喜欢你的

的排列方式，想要一个包含你的跨度的答案吗？或者在当前html上添加一个或两个额外的div和span可以吗？（这将使css变得更干净、更小）@cake我的目标是跨距，就像jQuery中的跨距一样，但如果可行的话，我愿意改变它：）“边框似乎不适用于顶部边距，但它们确实适用于底部边距？”——这个问题毫无意义。边框应用于元素，而不是“边距”。@CBroe她问的完全有道理。正确的答案是，边框应用于边距的内部，填充的外部。对我来说，它不是。“边框应用于边距内部，填充外部”——这当然是真的（OP可以很容易地自行查找），但将其表述为“边框应用于边距”仍然是胡说八道。

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