Layout
Having a grid is nice. We build components and the main layout using an 8px grid. In some cases, align icons and typography by a 4px grid.
Surround it with lines
Vertical basic lines help you determine the content area.
Nicely fit inside the basice lines.
Content goes well beyond beyond the basic lines.
Give some air
Legible and readable content is vital. Keeping the consistency in the distance between elements is a must.
Extra space helps user to read and understand copy.
Someone squeezed everything. Noone is going to read it.
Add an 8px step spacing between basic lines and spaces between elements. This creates a consistent content display.
8px step spacing applied. Everything looks consistent.
Vertical distance is inconsistent, 8px step missed.