Skip to main content
Version: 2.0.2

Margin / Padding

Margin​

The .ms-m-** class can be used to add a margin (from 1 to 20).

<div class="ms-m-1">margin 1rem</div>
<div class="ms-m-5">margin 5rem</div>

Display direction​

It's also possible to add a direction on the margin, with the : .ms-mt-*** (margin-top), .ms-mr-*** (margin-right), .ms-mb-*** (margin-bottom), .ms-ml-*** (margin-left).

<div class="ms-mt-2">margin-top 2rem</div>
<div class="ms-mr-2">margin-right 2rem</div>
<div class="ms-mb-2">margin-bottom 2rem</div>
<div class="ms-ml-2">margin-left 2rem</div>

Padding​

The .ms-p-** class can be used to add a padding (from 1 to 20).

<div class="ms-p-1">padding 1rem</div>
<div class="ms-p-5">padding 5rem</div>

Padding direction​

It's also possible to add a direction on the padding, with the : .ms-pt-*** (padding-top), .ms-pr-*** (padding-right), .ms-pb-*** (padding-bottom), .ms-pl-*** (padding-left).

<div class="ms-pt-2">padding-top 2rem</div>
<div class="ms-pr-2">padding-right 2rem</div>
<div class="ms-pb-2">padding-bottom 2rem</div>
<div class="ms-pl-2">padding-left 2rem</div>