Let's talk about a couple of useful strategies toward hunting down improvements for this UI.
Whenever you're looking to improve some CSS, start by drawing the boxes to the screen. Also look to your elements's padding - anything that takes up space or affects document flow as defined in CSS 2.1.[^1] What you want to see is balance and box paints that represent the elements as the user would see them on the screen.
What you don't want to see is 'deflated' elements or otherwise off-balance elements that do not reflect what the user sees. This usually points to problems in the CSS.
Here's a sidebar example with multiple opportunities for improvement. It can be made simpler, faster, easier to maintain and easier to change. The following step set focuses on balance.
This was a simple change (end result: equal
padding on both sides of the
navigation items, not just one) The effects of the final state above are
invisible to users. The problems we solved, however invisible they may seem,
are sharp pains if they ever manifest.
Here are a couple of the problems we solved:
The system has more balance and as a positive side-effect, internationalized text will work and the system is more robust in the face of some other kinds of change.
Remaining questions about this sidebar component:
[^1]: Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, 9.4, Normal Flow in the Visual Formatting Model