Error summary: include bulit-in bottom margins

[dlockhart]

In a typical scenario, a form is placed inside a panel or on a page that already has margins configured, like this:

<div style="margin: 20px;">
    <d2l-form>
        <!-- form elements -->
    </d2l-form>
</div>

That looks good when there aren't any errors:

But as soon as there are errors, the summary is placed at the top and because it has no bottom margins, the top of the form is right against it:

I think some default bottom margins on the summary would solve this nicely. In the LMS we use 10px as the bottom margin on the summary, but possibly something similar to the space between fields (1.5rem = 30px) would work better. Could use some design input (FYI @geurts).