如何从UI-Boostrap Angular Tab指令中删除下边距？

Question

找到的ui.bootstrap.tabs指令here在显示内容之前具有继承余量。

HTML：

elseif

<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>来显示此边距。

我的CSS不会阻止它。 （也许这是我不知道的属性？）

background-color: red

有什么想法吗？谢谢！

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>