jQuery UI选项卡，删除选项卡和选项卡内容之间的空格

Question

对于我的项目使用jQuery UI，我似乎找不到CSS来删除实际选项卡和选项卡内容之间的10 px左右的空白。

任何帮助表示赞赏。

Answer 1

在您的CSS文件/定义中尝试一下

.ui-tabs .ui-tabs-nav li {    
    margin: 1px 0 0 0 !important;
}

Answer 2

您将要定位.ui-tabs .ui-tabs-panel并删除顶部填充； 这是此选择器的默认样式：

.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 1.4em;
background: none;

这是一个小提琴，展示了一个基本的选项卡小部件，其中带有示例黑匣子，如您的图片中的黑匣子。

我强烈建议您不要使用!important覆盖任何样式，尤其是有关jQuery UI小部件的样式，因为该脚本会生成具有（在某些情况下）高度特定性的动态选择器。

我在Medium上写了一篇有关如何设置jQuery标签样式的文章 ； 虽然与您现有的问题没有直接关系，但我确实谈到了小部件的特定动态类。 如果您正在寻找进一步的帮助，它可能会在某种程度上为您提供帮助。

干杯!

Answer 3

我终于修复了它，花了很多时间在CSS上进行挖掘，只是弄清楚这是在此行中设置的一个怪胎的<p></p>标记： tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );

所有其他答案都很好，我发布的代码示例不足以给其他任何人解决的机会。 不确定是谁授予答案，所以我回答了自己，因为这实际上可以解决问题。

感谢其他以信息回复的人。