Navigation tabs styling inconsistencies

[afercia]

The navigation "tabs" used in the admin have some minor styling inconsistencies, e.g. about spacing between tabs:

the About screen:

the Freedoms screen (same for the Credits screen):

the Appearance > Menus screen:

Since the "tabs" are set to be displayed as inline-block, spaces, tabs, and new lines in the markup do matter. To style them consistently the markup should be paired first. The font size on the container affects the spacing between tabs too.
Not sure why the initial left padding should be different in the "About & Co." screens and in the menu screen, I'd say to pair it.

When these "tabs" are used as "real tabs" (whatever that means), for example as a well known SEO-related plugin does, there's a 1 pixel "jump" when switching tabs. To actually see this "jump" you should install the plugin and see it "in action". It's hard to catch this in a screenshot by the way you may notice in the screenshots below there's a 1 pixel difference (and the bottom border is missing) while clicking on a tab:

Finally, designers and UI people may want to have a look at how the tabs look like on small screens: they're basically changed in a sort of "buttons" and that makes sense, wondering if we should try to find some new design ideas :)

[paulwilde]

The about screen in particular seems to have some CSS inside of about.css that changes the styling. Removing that styling will revert the tabs to look exactly like those on the Menus screen.

[afercia]

First pass. The tabs spacing is now set to the natural spacing given by inline elements + 3 pixels. This is completely arbitrary of course and any design/UI feedback is very welcome. The 1 pixel "jump" should be fixed.

[afercia]

Setting milestone to 4.4 since it touches the About page :)

[wonderboymusic]

Patch is blowing up

[afercia]

Refreshed patch. Tried also to simplify things a bit and normalize white space between inline-block elements. About the white space issue, worth noting there's no optimal, clean, way to do that unless there's some consensus about starting to use the flexbox model.

[wonderboymusic]

In 35616:

Help/About: unify tab styling.

Props afercia.
Fixes #34214.

[afercia]

Missed to address some ​design feedback got on Slack: basically the space between tabs should be bigger for big tabs and smaller for small tabs. Also, I'd like to remove the 1px font-size trick since it's basically a hack and shouldn't be used in core.

There's an issue though, and it's the empty space between inline-block elements which makes difficult having a pixel-perfect distance between tabs. There are alot of ways to ​fight the space between inline block elements, but they all have drawbacks.
Since we can't predict when tabs will be printed out with or without empty space between them (thinking at Plugins for example), I'm wondering why display: inline-block is used in the first place.
Floating the tabs would solve the issue.

[afercia]

The proposed patch tries to improve the tabs styling consistency after [35616]

• remove the 1px font-size hack
• float the tabs and clear the tabs wrapper
• make the space between tabs proportional to the tabs font-size
• reduce the default tabs font-size from 15px to 14px

This way there will be 3 tabs "sizes":

• in the About/Credits/Freedoms screens: font-size 18px and distance between tabs 9px
• default, for example in the Menu screen: font-size 14px and distance between tabs 7px
• small tabs (e.g. Network Sites): font-size 12px and distance between tabs 6px

[wonderboymusic]

In 35673:

After [35616], improve the consistency of tabs styling.

Props afercia.
Fixes #34214.