Both margin and padding share the same predefined scale, this helps maintain consistency. There are 8 available spacing sizes .pa1, .pa2, .pa3, .pa4, .pa5, .pa6, .pa7, .pa8. In this case pa means padding all. If margin is required .ma1 through to .ma8 can be used. .ma0 or .pa0 can be used to remove all spacing.
Level 1: padding 4px
Level 2: padding 8px
Level 3: padding 16px
Level 4: padding 24px
Level 5: padding 32px
Level 6: padding 48px
Level 7: padding 64px
Level 8: padding 80px
<!-- Uniform Spacing -->
<!-- Padding 4px -->
<div class="mt2">
<div class="pa1 bg-blue-opactiy">
<p class="pa3 color-white bg-blue">Level 1: padding 4px</p>
</div>
</div>
<!-- Padding 8px -->
<div class="mt2">
<div class="pa2 bg-blue-opactiy">
<p class="pa3 color-white bg-blue">Level 2: padding 8px</p>
</div>
</div>
<!-- Padding 16px -->
<div class="mt2">
<div class="pa3 bg-blue-opactiy">
<p class="pa3 color-white bg-blue">Level 3: padding 16px</p>
</div>
</div>
<!-- Padding 24px -->
<div class="mt2">
<div class="pa4 bg-blue-opactiy">
<p class="pa3 color-white bg-blue">Level 4: padding 24px</p>
</div>
</div>
<!-- Padding 32px -->
<div class="mt2">
<div class="pa5 bg-blue-opactiy">
<p class="pa3 color-white bg-blue">Level 5: padding 32px</p>
</div>
</div>
<!-- Padding Top 48px -->
<div class="mt2">
<div class="pa6 bg-blue-opactiy">
<p class="pa3 color-white bg-blue">Level 6: padding 48px</p>
</div>
</div>
<!-- Padding 64px -->
<div class="mt2">
<div class="pa7 bg-blue-opactiy">
<p class="pa3 color-white bg-blue">Level 7: padding 64px</p>
</div>
</div>
<!-- Padding 80px -->
<div class="mt2">
<div class="pa8 bg-blue-opactiy">
<p class="pa3 color-white bg-blue">Level 8: padding 80px</p>
</div>
</div>
<!-- /.Uniform Spacing -->Individual spacing can be applied to a single side of an element using either margin or padding. Again, both margin and padding share the same 8 options, abriviated in the same way. For example mr3 would result in margin-right: 16px and so on. pt0 can be used to clear the spacing on a particular side of an element.
Level 1: padding top 4px
Level 2: padding right 8px
Level 3: padding bottom 16px
Level 4: padding left 24px
Level 5: padding top 32px
Level 6: padding right 48px
Level 7: padding bottom 64px
Level 8: padding left 80px
<!-- .Individual Spacing -->
<!-- Padding Top 4px -->
<div class="pt1 bg-blue-opactiy">
<p class="pa3 color-white bg-blue">Level 1: padding top 4px</p>
</div>
<!-- Padding Right 8px -->
<div class="mt2">
<div class="pr2 bg-blue-opactiy">
<p class="pa3 color-white bg-blue">Level 2: padding right 8px</p>
</div>
</div>
<!-- Padding Bottom 16px -->
<div class="mt2">
<div class="pb3 bg-blue-opactiy">
<p class="pa3 color-white bg-blue">Level 3: padding bottom 16px</p>
</div>
</div>
<!-- Padding Left 24px -->
<div class="mt2">
<div class="pl4 bg-blue-opactiy">
<p class="pa3 color-white bg-blue">Level 4: padding left 24px</p>
</div>
<!-- Padding Top 32px -->
<div class="mt2">
<div class="pt5 bg-blue-opactiy">
<p class="pa3 color-white bg-blue">Level 5: padding top 32px</p>
</div>
</div>
<!-- Padding Right 48px -->
<div class="mt2">
<div class="pr6 bg-blue-opactiy">
<p class="pa3 color-white bg-blue">Level 6: padding right 48px</p>
</div>
</div>
<!-- Padding Bottom 64px -->
<div class="mt2">
<div class="pb7 bg-blue-opactiy">
<p class="pa3 color-white bg-blue">Level 7: padding bottom 64px</p>
</div>
</div>
<!-- Padding Left 80px -->
<div class="mt2">
<div class="pl8 bg-blue-opactiy">
<p class="pa3 color-white bg-blue">Level 8: padding left 80px</p>
</div>
</div>
<!-- /.Individual Spacing -->| Name | Duration | Genre | Release Date |
|---|---|---|---|
| The Shawshank Redemption | 2h 22min | Crime, Drama | 14 October 1994 |
| The Godfather | 2h 55min | Crime, Drama | 24 March 1972 |
| Schindler's List | 3h 15min | Biography, Drama, History | 4 February 1994 |
| Se7en | 2h 7min | Crime, Drama, Mystery | 22 September 1995 |
<table class="Table Table-striped">
<thead>
<tr>
<th>Name</th>
<th>Duration</th>
<th>Genre</th>
<th>Release Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Shawshank Redemption</td>
<td>2h 22min</td>
<td>Crime, Drama</td>
<td>14 October 1994</td>
</tr>
<tr>
<td>The Godfather</td>
<td>2h 55min</td>
<td>Crime, Drama</td>
<td>24 March 1972</td>
</tr>
<tr>
<td>Schindler's List</td>
<td>3h 15min</td>
<td>Biography, Drama, History</td>
<td>4 February 1994</td>
</tr>
<tr>
<td>Se7en</td>
<td>2h 7min</td>
<td>Crime, Drama, Mystery</td>
<td>22 September 1995</td>
</tr>
</tbody>
</table>