Language selection

Search

Margin proximity

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use to increase or decrease the proximity of one object to another. This adjusts the white space between two elements to suggest whether items are related or unrelated. Additionally, these classes allow grid and non-grid content to exist in the same row.

Design and coding

Basic use

↥ Margin top

Increase or decrease the default top margin of an element (heading, table, list) or design object (panel, well, grid...).

Details
  • .mrgn-tp-0 = 0px
  • .mrgn-tp-sm = 5px
  • .mrgn-tp-md = 15px
  • .mrgn-tp-lg = 30px
  • .mrgn-tp-xl = 50px

↧ Margin bottom

Increase or decrease the default bottom margin of an element (heading, table, list) or design object (panel, well, grid...).

Details
  • .mrgn-bttm-0 = 0px
  • .mrgn-bttm-sm = 5px
  • .mrgn-bttm-md = 15px
  • .mrgn-bttm-lg = 30px
  • .mrgn-bttm-xl = 50px

↤ Margin left

Increase or decrease the default left margin of an element (heading, table, list) or design object (panel, well, grid...).

Details
  • .mrgn-lft-0 = 0px
  • .mrgn-lft-sm = 5px
  • .mrgn-lft-md = 15px
  • .mrgn-lft-lg = 30px
  • .mrgn-lft-xl = 50px

Increase or decrease the default right margin of an element (heading, table, list) or design object (panel, well, grid...).

Details
  • .mrgn-rght-0 = 0px
  • .mrgn-rght-sm = 5px
  • .mrgn-rght-md = 15px
  • .mrgn-rght-lg = 30px
  • .mrgn-rght-xl = 50px
Correct use

Compliance point(s):

Incorrect use

Compliance point(s):

Enhanced use

Add-on features

Additional add-on features and behaviours are available.

Supporting principles

Increasing or decreasing proximity and white space suggests that content is either associated or unrelated.

The principle of proximity in visual perception is a very simple one: things that are spatially close to each other are seen as related. We can use this principle to make it clear when elements ... have an association, and when they are separate.

Put things that are related close together, and space things that need to be seen as separate.

We can apply the principle of proximity in reverse: elements that are spaced apart from each other are seen as separate.

The principle of proximity calls for related items to be grouped visually, creating less clutter and making for a more organized layout. Items unrelated to each other should be placed further apart, to emphasize their lack of relationship.

Using white space effectively and grouping related elements are critical to giving your website a clear visual hierarchy.

Date modified: