Spacing

Demo

A common best practice that many developers forget to follow is providing enough white page around interactive page elements. This is especially important if you are providing content for users of touch-screen devices.

Ensure that you provide plenty of whitespace around elements for users to interact with on a touch-screen device/tablet. Not everyone has the same size fingers!

Available space surrounding page elements:

Margin = exterior space between element borders.
Border = defines boundary for an element.
Padding = space between border and element content
Element content

Bad


Good