Skip to main content

Chassis v5.6.0

Padding utilities

Padding utilities allow you to easily add or remove padding in multiples of 6px and 7px.

Add padding in multiples of the horizontal or vertical rhythm, from 0 - 10, plus 15 and 20 for larger screen sizes.

<div class="ch-pt--[0-10, 15, 20]"></div>
<!-- padding-top: [0-10, 15, 20]; -->

<div class="ch-pt--[0-10, 15, 20]"></div>
<!-- padding-top: [0-10, 15, 20]; -->

<div class="ch-pb--[0-10, 15, 20]"></div>
<!-- padding-bottom: [0-10, 15, 20]; -->

<div class="ch-pl--[0-10, 15, 20]"></div>
<!-- padding-left: [0-10, 15, 20]; -->

<div class="ch-pr--[0-10, 15, 20]"></div>
<!-- padding-right: [0-10, 15, 20]; -->

<div class="ch-pa--[0-10, 15, 20]"></div>
<!-- padding: [0-10, 15, 20]; -->

<div class="ch-pv--[0-10, 15, 20]"></div>
<!-- padding-top: [0-10, 15, 20]; padding-bottom: [0-10, 15, 20]; -->

<div class="ch-ph--[0-10, 15, 20]"></div>
<!-- padding-left: [0-10, 15, 20]; padding-right: [0-10, 15, 20]; -->

<!-- Responsive -->
<div class="[sl,sm,md,lg]:ch-ph--[0-10, 15, 20]"></div>