demo

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伪，但我已经尝试为边框提供宽度，这不是一个好主意，因为#foo元素的宽度可能会有所不同。

Answer 1

我想你可以尝试：在ge之前 link

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

Answer 2

使用填充和background-clip: content-box;

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

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

当然，这限制了其他可用的填充内容，但这回答了这个问题。

Answer 3

可以使用以下伪类来实现此目的。您只需要改变高度和顶部值：之后达到所需的边框间距。如果你想要一个更大的顶部边框，你还需要更改#foo的margin-top。

#foo{
  background: #f00;
  display: inline-block;  
  padding-top: 10px;    
  position: relative;
  margin-top: 10px;
}

#foo:after{
  content: '';
  position: absolute;
  background-color: #000;
  height: 5px;
  width: 100%;
  top: -9px;
  left: 0;
  z-index: -1;
}

http://jsfiddle.net/5cstrzsx/1/

Answer 4

这是一个JavaScript解决方案：

我们的想法是将<span>包裹在<div>中。使用JavaScript获取width元素的height和span。设置width的{{1}}等于div的{{1}}。设置width的{{1}}等于span + height的{{1}}，最后，为div元素设置{{1 }} height。

请注意，我已将span添加到20，以使其span与20px元素相同。

marginTop

box-sizing: border-box

#border

Answer 5

通过更改标记，我得到了更简单的解决方案：

<span class="content"><span class="border-top">&nbsp;</span>Lorem Ipsum</span>

以下是demo

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

demo

5 个答案: