General

Designers use the terms padding and margin space interchangeably.

Developers the box model for the site is content-box.

As a general rule padding and margins are divisible by increments of five. For example, modal would be 300px wide, with a margin of 60px and padding of 15px. All of those numbers are divisible by five.

Padding and Margin

It’s considered good practice to have margin and padding space around elements and components. For example, you will never see paragraph text that sits against the edge of the screen on a device. There should always be some space between elements.

Incorrect

Correct

Alignment

In general, designs will use alignment to help users understand and read the information on the page with ease. Alignment of elements give a sense of order to the page therefore use alignment to create visual harmony. Alignment of elements along X and Y axis take the form of left, right, center (X-axis) and top, bottom, center (Y-axis). Elements that do not use alignment should be avoided.