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

【问题标题】：How to remove lower margin from UI-Boostrap Angular Tab directive?如何从 UI-Bootstrap Angular Tab 指令中删除下边距？
【发布时间】：2016-05-27 19:51:50
【问题描述】：

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

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;
}

有什么想法可以尝试吗？谢谢！

【问题讨论】：

标签： html css angularjs angular-ui-bootstrap

【解决方案1】：

如果您尝试应用的 css 位于正确的元素上，我建议增加选择器的特异性，例如“#tabSet .uib-tab”，或使用 !important。

【讨论】：

【解决方案2】：

我认为问题在于应用于选项卡内容中 p 元素的样式。 tab-content 和 tab-pane 类（应用于包装标签内容的元素）没有边距或填充样式。这个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>

【讨论】：