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.

Extra Small2pxbocss-margin-xsmallbocss-padding-xsmall
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>



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:

	@include bocss-padding-one-side('left', 'small');


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


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

	margin: $bocss-spacing-medium;