css - 在元素和边框之间应用间距

Question

demo

html:

<span id="foo">foo</span>

CSS:

#foo{
    background: #f00;
    display: inline-block;
    border-top: 5px solid #000;
    margin-top: 20px;
}

但是 margin-top 应用于整个元素。我想要红色背景和黑色边框之间的空间。

我已经用 :before pseudo 试过了，但是我必须给边框宽度，这不是个好主意，因为 #foo 元素的宽度可能会有所不同。

Answer 1

我想你可以试试 :before to ge link

 span:before{ border-top: 5px solid #000;display:block;content:"";margin-top:-6px;}