[WNMGDS-312] Update margin and padding examples

[line47]

Summary

• Add pixel values to margin and padding examples
• Update examples design to a more conventional format like found on the colors page (example, class, value)
• Added control to render padding and margin examples
• Added styles for margin and padding rendering

How to test

1. run the doc site with yarn start
2. the visit the margin page and padding page to see updated examples with pixel values

Checklist

• [x] Prefixed the PR title with the Jira ticket number as [WNMGDS-####] Title

If this is a change to code:

• [x] Created or updated unit tests to cover the logic added
• [x] If necessary, updated unit-test snapshots (yarn test:unit:update) and browser-test snapshots (yarn test:browser:update)

If this is a change to documentation:

• [x] Checked for spelling and grammatical errors

[pwolfert]

Hey, your new example is slick 👍