Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How to adjust top padding on tab titles?

more options

If I set my tab title bar height to 30px in my userChrome.css the tab titles are no longer centered (top to bottom) on the tab bar. The top padding on the tab titles needs to be reduced by at least 3px and I would be grateful for a code snippet that does so.

If I set my tab title bar height to 30px in my userChrome.css the tab titles are no longer centered (top to bottom) on the tab bar. The top padding on the tab titles needs to be reduced by at least 3px and I would be grateful for a code snippet that does so.

Chosen solution

@cor-el Thanks for helping. I did webdesign part time for 10 yrs and I solved my issue by appending a negative margin statement to the tab bar font size statement as seen below. ... I used to custom code & modify WordPress a lot and used to make some straight HTML pages also.

} /* Tab bar */

  1. TabsToolbar {
 font-size: 15px !important;
 margin-top: -4px !Important;

}

The textbox butchered my code a little but you get the idea.

Read this answer in context 👍 0

All Replies (3)

more options

OP here, after looking further, its the top padding on the title bar that needs to be shortened, and not the padding on the tab titles. You can really tell this on the active tab on the pic's right side. Here is a screen shot:

Modified by bwbradwicks

more options

You can adjust the margin-bottom or possibly try a negative margin-top to pull up the text. The inspector should also show the actual height of the tab text container and you may have to add a "height: var(--tab-min-height)" to some of the containing elements assuming that you have modified --tab-min-height to set the tab height.

*|*:root {--tab-min-height: 30px !important;}

more options

Chosen Solution

@cor-el Thanks for helping. I did webdesign part time for 10 yrs and I solved my issue by appending a negative margin statement to the tab bar font size statement as seen below. ... I used to custom code & modify WordPress a lot and used to make some straight HTML pages also.

} /* Tab bar */

  1. TabsToolbar {
 font-size: 15px !important;
 margin-top: -4px !Important;

}

The textbox butchered my code a little but you get the idea.

Modified by bwbradwicks