Reduce the distance between tabs and container

Question

I am using jQuery UI tabs. How can I reduces the width of the highlighted area(yellow).

jQuery UI Tabs

<script><link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> </script>
<div id="tabs">
<ul>
 <li><a href="#tab1">Tab 1</a><Search</li>
 <li><a href="#tab2">Tab 2</a>List</li>
 <li><a href="#tab3">Tab 3</a>List</li>
</ul>

Probably `body { margin: 0; }` – Alon Eitan Jul 20 '16 at 21:52 — Alon Eitan, Jul 20 '16 at 21:52
.ui-tabs{ padding:0px !important; } – Luis Cardenas Jul 20 '16 at 22:28 — Luis Cardenas, Jul 20 '16 at 22:28

score 1 · Answer 1 · answered Jul 20 '16 at 21:53

1

Not sure if this is the right way -

#tabs ul{margin: -1.2em 0em 0em 0em;}

answered Jul 20 '16 at 21:53

Full Stack Developer - Java

155
1
3
17

1

It isn't the best. If you use margin to cancel out positioning because you don't know why it's positioned that way, before too long you'll have quite a mess on your hands. Best thing to do is figure out what CSS style is causing you to have more spacing than you want. A good way to do that (using Chrome) is right click on the space you don't want and select Inspect. Then see what styling is being applied. You can edit the values and watch them change on the screen. – BobRodes Jul 21 '16 at 08:03

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

If #tabs do no have any parents, it is probably the padding of the #tabs container. Try this:

#tabs {
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
}

For more details on margin and padding, check this question.

edited May 23 '17 at 11:58

Community

1
1

answered Jul 20 '16 at 21:54

Fernando Irarrázaval G

903
6
18

Reduce the distance between tabs and container

2 Answers2