W3.CSS framework: Recap 2

Padding and margins

w3-padding classes specify extra top and bottom padding to an element in pixels:

w3-padding-16, w3-padding-24, w3-padding-32, w3-padding-48 and w3-padding-64.

See this in action (it also shows how the color specification automatically switches text colors from black to white when called for).

You can all so use it with text for sizes:

w3-padding (8px top and bottom, 16px left and right padding)

w3-padding-small (4px top and bottom, 8px left and right)

w3-padding-large (12px top and bottom, 24px left and right )

Margins

The w3-margin class adds 16px margin to all sides of an element. The only new twist is w3-section to add a 16px margin top and bottom. It can be handy for elements that do not have a default top or bottom margin. Otherwise it's w3-margin, w3-margin-top etc.