CSS styling suggestions

[hedgefield]

I'm really digging the new way to present the information on the Settings pages, but visually I got a bit of a cluttered, disjointed feeling from glancing over the page. It's hard to describe, but it felt like it was hard to grasp what belonged together, a sort of mental noise. So I tweaked some CSS to see if I could get rid of that feeling. Tell me what you think:

• I simplified the padding on settings-field-title to 5px 0 (from 5px 10px 10px 0) to pull the fields and their titles closer together
• I moved the descriptions above the input fields. This makes more sense to me, reading the instruction before you fill something in. It also makes the inputs feel more like 'blocks', which helps with scanning and reduces the mental noise between fields.
• One other thing I struggled with is the white space between sections. It didn't so much separate sections as made it feel like the spacing was inconsistent, particularly also because it was used within sections (site title, tagline, then whitespace, wordpress address, site address, whitespace etc). So as an experiment I put a border between the sections, and for me that really helps. (It's border-top: 1px solid #cccccc; with margin-bottom reduced to 30px)

[joyously]

I got that feeling too, and wouldn't know what to call it.
This looks better to me.

[felixarntz]

The layout appears more clear to me as well with your changes - great! I like the idea of moving descriptions above the inputs in particular. While it is a bit different from what we're used to, I think it makes sense for the reading flow.

More feedback from an actual designer would be much appreciated.

[afercia]

Definitely something worth experimenting :) I'd just suggest to consider a max-length for long lines of text. Ideally, for better readability they shouldn't exceed ~80 characters. See also https://core.trac.wordpress.org/ticket/34991