Not enough vertical spacing on check your answers sections

[daviddotto]

https://govuk-prototype-kit.herokuapp.com/docs/examples/check-your-answers-page

In example page, sections are spaced too closely together, making distinguishing sections difficult.

Additional margin could be added to the bottom of .app-check-your-answers sections to add white space.

[NickColley]

Whitespace at GOV.UK Frontend 6.x

Whitespace at GOV.UK Frontend 7.x

[kr8n3r]

can't immediately see any obvious padding change 32e20ec#diff-a43f72cb22732f4fb3b3457903970c99

[dashouse]

Looks like there’s a couple of issues with that example, because we don’t have a

defined in Frontend it is using HTML defaults.

Rather than adding your own padding I would suggest using the responsive spacing scale –

Try this on each

<dl class="govuk-!-margin-bottom-0 govuk-!-margin-bottom-9 app-check-your-answers app-check-your-answers--short">

[daviddotto]

I'm currently adding govuk-!-padding-top-5 to the h2 heading above each section, this has replicated the styling of the old prototype kit, It looks like the changes to heading padding has caused everything to look very compressed on that page

[dashouse]

Hey David, that's great. When we make this change to the kit we'll be zeroing out the margin-top of the <dl> and only adding margin-bottom unless necessary to bring it in line with out components and typography. We are generally trying to only apply spacing in one direction, but it's absolutely fine to do this within your own app.

[daviddotto]

Makes a lot of sense, it did seem a little hacky when I was putting it in, the only issue I had with it was it didn't solve the issue of the first h2 section header being too close to the top heading

[kr8n3r]

being fixed here: #547

[NickColley]

This will be fixed in the next release, thanks for raising :)