Question

这是我的HTML

<div class="a" style="height: 100px; background: red; padding-top: 40px">
</div>
<br/>
<br/>
<div class="b" style="height: 100px; background: red; padding-top: 40px">
</div>

和我的css

.a:before { background-color: green; height:10px;display: block; content: " "; }
.b { border-top: solid 10px green; }

这里是小提琴

http://jsfiddle.net/LZgYP/

我希望第一个div标签看起来像第二个。

我想使用：之前将边框（而不是border-top）添加到div标签，因为我稍后会使用图案（图像）。但我希望在边框后填充，而不是之前。有办法吗？

我正在构建一个通用的SCSS库来指定顶部边框。用户可以选择实体边框或图案 - 我也会有一个模式库。在模式的情况下，我猜唯一的选择是使用：before并使用repeat-x指定背景图像。因此，我希望保持一致并使用：在指定边框之前，即使实际标签指定了填充，我也希望此边框粘在顶部。

由于这是通用的，我不知道标签的填充是什么，所以：在css之前的负边距不能使用

Answer 1

回答更新：
在a:before添加padding-bottom并从DIV a

中删除padding-top

<div class="x" style="height: 100px; background: red;">
    blah blah
</div>
<br/>
<br/>
<div class="y" style="height: 100px; background: red;">
    blah blah
</div>

和

.a:before { background-color: green; height:10px;display: block; content: " ";padding-bottom:40px }
.b:before { background-color: green; height:10px;display: block; content: " ";margin-bottom:40px }

请参阅此jsfiddle

Answer 2

我必须承认，我无法理解为什么你不想用简单的边框去做，仍然是我要做的就是模仿边框。我放置一个：在伪元素绝对定位到顶部之前。唯一的先决条件是相对定位主div，以便伪元素可以放在顶部。

.a:before { 
    background-color: green; 
    height:10px; 
    content: ""; 
    width: 100%;
    position: absolute; 
    top: 0;}

这是一个小提琴，希望它能解决问题，http://jsfiddle.net/gleezer/ZVUFv/1/

填充结合：之前在CSS中

2 个答案: