Question

HTML

<ul id="tabs">
<li><a href="#tab-1" class="active">Tab-1</a></li>
<li><a href="#tab-2">Tab-2</a></li>
<li><a href="#tab-3">Tab-3</a></li>
</ul>
<div class="tab-contents" id="tab-1" style="display: block;">
    some text
</div>

CSS

.tab-contents{
    background: #2b2a26;
    padding: 0px 8px;
    clear: both;
}


#tabs {
    border-collapse: separate;
    border-spacing: 4px 0;
    float: right;
    list-style: none outside none;
    margin: 0 -4px 0 0;
    padding: 0;
}
#tabs li {
    background: none repeat scroll 0 0 #000000;
    border-radius: 19px 19px 0 0;
    display: table-cell;
    height: 47px;
    margin: 0 4px;
    text-align: center;
    vertical-align: middle;
    width: 145px;
}

#tab-1:before{
    content: "";
    display: block;
    width: 200px;
    height: 200px;
    background: #f00;
    padding-top: 10px; /* not working as expected but giving padding to bottom */
}

demo

在灰色框内，红色框应表现为填充顶部。我怎么能这样做？

Answer 1

您可以使用padding-top代替.tab-contents。

.tab-contents{
    background: #2b2a26;
    padding: 0px 8px;
    clear: both;
    padding-top: 10px;
}

Demo

或者，您可以position: relative; top: 10px;使用#tab-1:before代替填充顶部。

demo

Answer 2

您的意思是使用margin-top代替padding-top吗？

http://jsfiddle.net/SmN28/4/

在伪之前使用时使用填充样式

2 个答案: