Firefox CSS coding

[tinyitx]

I wish to narrow the gap/spacing between bookmarks in their drop down menu. They are just too far apart and waste a lot of space, in the default setup.

I am not familiar with CSS coding but found someone's CSS file to do this trick. It says this will give a padding of 4 pixels, which is narrower than the default.
If I wish to get narrower than 4 pixels, what do I need to edit this CSS file? Changing the '4px' to '3px' or '2px' should be obvious, but how about the '8px'?

Thanks.
Below is the CSS coding:-

/*** Tighten up drop-down/context/popup menu spacing ***/

menupopup > menuitem, menupopup > menu {
padding-block: 4px !important;
}
:root {
--arrowpanel-menuitem-padding: 4px 8px !important;
}

 

[BaK]

CSS: padding property

This CSS tutorial explains how to use the CSS property called padding with syntax and examples. The CSS padding property defines the padding space on all sides of an element.

www.techonthenet.com

The CSS padding property can be expressed with one, two, three or four values provided. And each value can be expressed as either a fixed value or as a percentage.
When two values are provided, the first value will apply to the top and bottom of the element. The second value will apply to the left and right sides of the element.

You may have a look here (no guarantee): http://forums.mozillazine.org/viewtopic.php?f=23&t=3074250&p=14891821#p14891821

Latest 89.0b? builds have Proton increased spacing between line entries in menu dropdowns that are way too tall and waste space between entries. There is no setting to change line spacing.

Work-around: set browser.proton.context menus.enabled to 'false' in about:config. The other proton entries can remain at 'true'.

They then revert to a more reasonable spacing.

 

[ignsvn]

menupopup > menuitem, menupopup > menu {
padding-block: 4px !important;
}

In strict CSS padding context, 1 number means it's applicable to all 4 sides of the element.

:root {
--arrowpanel-menuitem-padding: 4px 8px !important;
}

.. and if you see 2 numbers, the 1st number is for vertical padding (top bottom), and the 2nd number is for horizontal padding (left right).

Just create a backup somewhere, try and refresh. There should be no harm.

 

[tinyitx]

@BaK @ignsvn
Thank you both. Your answers are exactly what I am looking for.