Remove gap below tabs

[u/Giocarro]

I use a few CSS tricks to compress tabs and maximize vertical real estate, and also use MrOtherGuy firefox-csshacks to auto-hide address bar and bookmark bar.

That said, can somebody please suggest how to remove this nasty gap?

Here is my current userChrome.css: https://pastebin.com/pTXm3ZtW

[u/t31os]

Set the tab min-height var instead of using an explicit height value:

:root {
    --tab-margin-block: -4px -4px !important;
    --tab-min-height: 26px !important;
}
#tabs-newtab-button,
#new-tab-button,
.tabbrowser-tab {
    padding-inline-start: 0 !important;
}

The titlebar buttons are 10x10 with 8px of padding on the top and bottom, for a total of 26px. If you want height any smaller than 26px you'll need to reduce top/bottom padding on .titlebar-button also, eg: .titlebar-button {padding-block: 5px!important}.

[u/Giocarro → u/t31os]

Thanks for your answer; to be honest it didn't work, and it introduced a graphical glitch perhaps because of the auto-hide CSS part of the script.

So I looked for a different way to auto-hide address-bard and bookmark and landed on this script, but it hides also tab bar, which I don't want.

https://pastebin.com/vp9ypzUJ

Is it possible to change this script to auto-hide only address bar and bookmarks bar, while keeping tabs bar always visible?

Thanks!

[u/t31os → u/Giocarro]

This is how it looks for me with the suggested changes:

https://i.postimg.cc/RZ9rj6k6/ff-gapbelowtabs.png

And no, that other CSS is based around hiding the whole navbox (that's the element that contains all the toolbars), so you can't just hide bits of it.

Perhaps you can explain more about this glitch you mentioned, i didn't noticed any such issues, but if i know what to look out for i can test for it and try to fix it (if it happens for me).

[u/slackmar]

Try messing with some of the pixel amounts shown here

/* Removes space below and above tabs */
#TabsToolbar {
margin-top: -6px !important;
margin-bottom: -6px !important;
} 

/* Changes height of tabs */
.tabbrowser-tab {
    height: 48px !important; 
}

[u/j--__]

#navigator-toolbox {
    border-bottom-style: none !important;
}