Margins and Padding

Add margins or padding to declutter content, making it easier to absorb.

Best practices

  • Add margins or padding in place of <br/> codes.
  • Avoid adding margins or padding before and after headers to respect layout standards.
  • Use sparingly.

Available sizes

Our five available sizes offer flexibility while respecting our layout standards. In these examples, the light grey colour shows the html element; the dark grey colour shows the spacing applied evenly around the html element.

xsmall: 2px
small: 5px
medium: 15px
large: 25px
xlarge: 35px

Utility classes

Apply utility classes to add margins or padding. Use margins to create white space. To add spacing around your element’s content, use padding.

Example: Adding a 'small' uniform margin to a paragraph element:


  <p class="bocss-margin-small">Paragraph with small margin.</p>
  

Uniform spacing

Use these classes to add even spacing around your html element.

SizeValueMarginPadding
Extra Small2pxbocss-margin-xsmallbocss-padding-xsmall
Small5pxbocss-margin-smallbocss-padding-small
Medium15pxbocss-margin-mediumbocss-padding-medium
Large25pxbocss-margin-largebocss-padding-large
Extra Large35pxbocss-margin-xlargebocss-padding-xlarge

One-sided spacing

Add one or more one-sided utility classes if uneven spacing is desired.

Example of adding padding of size small to the top and left sides of an element:


<div class="bocss-padding-left-small bocss-padding-top-small">Example Element</div>
SideMarginPadding
Topbocss-margin-top-smallbocss-padding-top-small
Bottombocss-margin-bottom-smallbocss-padding-bottom-small
Leftbocss-margin-left-smallbocss-padding-left-small
Rightbocss-margin-right-smallbocss-padding-right-small

Developers

Mixins

A set of scss mixins is available within the framework allowing for user friendly spacing application. These mixins can be passed as either a size variable or a string (for example, 'small', 'medium'). If the variable or size isn’t within the framework, an scss compile error will appear.


@include bocss-padding($size)
@include bocss-padding-one-side($dimension, $size)
@include bocss-padding-horizontal($size)
@include bocss-padding-vertical($size)

@include bocss-margin($size)
@include bocss-margin-one-side($dimension, $size)
@include bocss-margin-horizontal($size)
@include bocss-margin-vertical($size)

Note: "$dimension" in one-sided spacing mixins can be "top", "left", "bottom", or "right"

Example: Using a mixin to apply 'small' padding to the left side of an element with a "example-element" class:


.example-element{
	@include bocss-padding-one-side('left', 'small');
}

Variables

Use the spacing size variables directly as a replacement for the units in scss. This ensures the spacing values remain up to date.


$bocss-spacing-xsmall
$bocss-spacing-small
$bocss-spacing-medium
$bocss-spacing-large
$bocss-spacing-xlarge

Example: Using a spacing variable to apply a uniform 'medium' margin to an element with an "example-element" class:


.example-element{
	margin: $bocss-spacing-medium;
}