Twenty Fifteen: Better spacing between navigation items and their descriptions.

[philiparthurmoore]

When styles are disabled menu items and their descriptions are flush (see image attachment). This proposed patch adds a space between menu items and their descriptions. I’ll say outright that I am 100% with this proposal being closed, but it feels weird to have no spaces between words like that.

Part of me would even suggest changing span to div here. The reason is because when spans are used there’s no good way to indicate what’s the menu item and what’s the menu item description (see image). When a div is used there’s a line break and so you can both 1) handle the styling via CSS but also 2) make sure that when styles are disabled there’s a clear visual distinction between menu items and their descriptions.

What do you think? See the patches for potential improvements.

[philiparthurmoore]

With DIV

[philiparthurmoore]

With Space

[philiparthurmoore]

The way things look currently.

[philiparthurmoore]

With Space.

[philiparthurmoore]

With DIV

[philiparthurmoore]

Also, block-level elements inside of links should be fine since we're using HTML5, but please do correct me if I'm wrong on that.

[iamtakashi]

Related: #29890

As suggested in #29890, div works here too, and then we don't need display: block from .main-navigation .menu-item-description in the CSS.

[philiparthurmoore]

Use DIVs instead of SPANs and remove unnecessary CSS.

[iandstewart]

In 30302:

Twenty Fifteen: simpler CSS by using divs instead of spans for menu descriptions.

Props philiparthurmoore, fixes #30296