Vertical rhythm

It concerns the structural height and spacing of vertically stacked elements, most commonly the padding, margins and line height. Just like a horizontal grid achieves harmony by restricting the layout to a set of predefined unit sizes, the vertical rhythm (or baseline) solidifies the structure by offering consistent, predictable measures as the user scrolls down the content.

Base padding: 5px; Base margin:5px.

Vertical margins 

  • Small : *2
  • Medium: *4
  • Large: *8
  • X-Large: *12