jQuery UI Tabs, remove whitespace between tabs and tab content

Question

Using jQuery UI for my project and I can't seem to find the CSS to remove the 10 px or so white space between the actual tabs and the tab content.

Any help is appreciated.

Answer 1

try this in your css file/definition

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

Answer 2

You're going to want to target .ui-tabs .ui-tabs-panel and remove the top padding; here's the default styling for this selector:

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

Here's a fiddle demonstrating a basic tabs widget with an example black box like the one in your picture.

I'd strongly advise against using !important to override any styles, especially with regard to the jQuery UI widgets, as the script generates dynamic selectors with (in some cases) a high level of specificity.

I wrote an article on Medium about how to style jQuery tabs; while not directly relevant to your existing problem, I do touch upon the specific dynamic classes for the widget. If you're looking for further help, it might aid you in some way.

Cheers!

Answer 3

I finally fixed it, many wasted hours digging through CSS just to figure out that it was a freakin' <p></p> tag set in this line: tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );

All other answers were fine and I didn't post enough of a code sample to give anyone else a chance at a solution. Was not sure who to award the answer to so I answered myself since this is what actually fixed the issue.

Thanks to the other folks who responded with info.