UI-Boostrap Angular Tabディレクティブから余白を削除するには？

Question

ui.bootstrap.tabsディレクティブhereは、その内容を表示する前に継承マージンを持っています。

HTML：

<uib-tabset active="activeJustified" justified="false" id="tabSet" style="background-color: red"> 
    <uib-tab index="0" heading="Assessment" class="uib-tab"> 
     <p style="background-color: green">TEST</p> 
    </uib-tab> 
    <uib-tab index="1" headin[![enter image description here][2]][2]g="SJ" class="uib-tab"></uib-tab> 
    <uib-tab index="2" heading="Long Justified" class="uib-tab"></uib-tab> 
</uib-tabset> 

<uib-tabset>は、このマージンを表示するbackground-color: redを持っています。

私のCSSはそれを止めません。 （おそらくそれは私が知らない財産ですか？）

.uib-tab { 
margin: 0px; 
padding: 0px; 
} 

.uib-tabset { 
margin: 0px; 
padding: 0px; 
} 

お試しください！ありがとうございました！

Answer 1

あなたが適用しようとしているCSSが正しい要素にある場合は、「＃tabset .uib-tab」などのセレクタの特異性を増やすか、！importantを使用することをお勧めします。

Answer 2

問題は、タブのコンテンツのp要素に適用されるスタイルだと思います。タブコンテンツとタブペインのクラス（タブコンテンツをラッピングする要素に適用される）には、マージンやパディングスタイルはありません。このplunkはあなたが見ている効果を実証しています。私がこれを証明するために使ったコードは、

<uib-tabset active="active" style="background-color: red;"> 
    <uib-tab index="0" heading="Tab 1"> 
    <div style="background-color: green;">Tab 1 content</div> 
    </uib-tab> 
    <uib-tab index="1" heading="Tab 2"> 
    <p style="background-color: blue;">Tab 2 content</p> 
    </uib-tab> 
    <uib-tab index="3" heading="Tab 3"> 
    <p style="background-color: yellow; margin: 10px;">Tab 3 content</p> 
    </uib-tab> 
</uib-tabset> 

です。