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>" );

所有其他答案都很好，我發布的代碼示例不足以給其他任何人解決的機會。 不確定是誰授予答案，所以我回答了自己，因為這實際上可以解決問題。

感謝其他以信息回復的人。