I am using Firefox 24.0 on Windows 8.1 64-bit (RTM from MSDN) and have a few extensions installed which add buttons to the navigation bar.

For some reason there is a large amount of wasted space between the icons:

enter image description here

In some cases this is even worse when the icon has a drop down:

enter image description here

Is there any way to reduce this spacing?


I would recommend you to edit the userChrome.css-File. Yes, the name is userChrome.css.

You can edit the padding between these icons in this css-file.

For example:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#nav-bar toolbarbutton { 
  padding-left: 0px !important;  
  padding-right: 0px !important;
  margin-left: 0px !important; 
  margin-right: 0px !important;  

Here you reduce the padding between the icons to 0px. So there is less space between the icons.

Ways to do it

  • I would recommend you to use ChromeEdit to easily edit the appearance.
  • You can also edit the configuration-files directly. Have a look at this website. On this website, there are many ways shown how to edit the configuration/appearance.
  • will this file be overwritten when Firefox is updated? Or is it a user-specific file? (I guess the answer is in the filename! But I just want to be sure)
    – Shevek
    Oct 14 '13 at 23:56
  • It is userspecific.
    – Christian
    Oct 15 '13 at 9:07
  • I also set margins to 0 as well
    – Shevek
    Oct 15 '13 at 10:28
  • With Firefox 84, this doesn't work for me. Instead of margins and paddings, I set "--toolbarbutton-inner-padding: 2px".
    – T-Gergely
    Jan 19 at 20:07

On later versions of Firefox the answer here no longer seems to work.

This thread on Firefox support pushed me in the right direction but the advice given there controls padding inside the icon itself (.toolbarbutton-icon), meaning if you put it to 10px you shrink the icon "inward" by that amount. Not exactly what I was after. The correct userchrome entry for me was:

#personal-bookmarks .bookmark-item {  
    padding-left: 3px !important;  
    padding-right: 3px !important;

This tightens up the default spacing somewhat and feels like it returns it to something closer to Firefox classic days. This works on Firefox 80.0.1.

Note: original answer used only padding but this also affects entries in the bookmark menus, meaning you'd have top and bottom padding added on. Can probably be corrected by using more specific CSS options for the menus but can simply be avoided by using left and right padding entries.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.