Padding

Syntax

Class
Properties
p-{value}
padding: {value};
px-{value}
padding-left: {value};
padding-right: {value};
py-{value}
padding-top: {value};
padding-bottom: {value};
pt-{value}
padding-top: {value};
pr-{value}
padding-right: {value};
pb-{value}
padding-bottom: {value};
pl-{value}
padding-left: {value};
pt-full
padding-top: 100%;

Parameters

value
<length-percentage default-unit=1px>

Padding is inside the element so to demonstrate it we put it on the container in this example.

<div class="t1 bg-c-white shadow-4 p-16"> <div class="t1 w-96 h-96 bg-c-blue-500-50"></div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Passing argument of type number.
t1 p-1
.t1.p-1 { padding: 1px; }
Passing argument of type number with fraction.
t1 p-1.5
.t1.p-1\.5 { padding: 1.5px; }
Passing negative argument of type number, prefix form.
t1 -p-1
.t1.-p-1 { padding: -1px; }
Passing negative argument of type number, infix form.
t1 p--1
.t1.p--1 { padding: -1px; }
Passing argument of type length.
t1 p-1em
.t1.p-1em { padding: 1em; }
Passing argument of type length with fraction.
t1 p-1.5em
.t1.p-1\.5em { padding: 1.5em; }
Passing negative argument of type length with fraction, prefix form.
t1 -p-1.5em
.t1.-p-1\.5em { padding: -1.5em; }
Passing negative argument of type length with fraction, infix form.
t1 p--1.5em
.t1.p--1\.5em { padding: -1.5em; }
Passing argument of type percentage.
t1 p-2%
.t1.p-2\% { padding: 2%; }
Passing argument of type percentage, with fraction.
t1 p-33.33%
.t1.p-33\.33\% { padding: 33.33%; }
Passing negative argument of type percentage, prefix form.
t1 -p-2%
.t1.-p-2\% { padding: -2%; }
Passing negative argument of type percentage, infix form.
t1 p--2%
.t1.p--2\% { padding: -2%; }
Utility function px-
t1 px-2
.t1.px-2 { padding-left: 2px; padding-right: 2px; }
Utility function py-
t1 py-2
.t1.py-2 { padding-top: 2px; padding-bottom: 2px; }
Utility function pt-
t1 pt-2
.t1.pt-2 { padding-top: 2px; }
Utility function pr-
t1 pr-2
.t1.pr-2 { padding-right: 2px; }
Utility function pb-
t1 pb-2
.t1.pb-2 { padding-bottom: 2px; }
Utility function pl-
t1 pl-2
.t1.pl-2 { padding-left: 2px; }
Invalid number of arguments
t1 p-1-2
Error: invalid arguments passed to utility function [p] in [p-1-2]
Invalid argument of type angle
t1 p-1deg
Error: invalid arguments passed to utility function [p] in [p-1deg]
Special alias `full` for padding-top 100% which is common.
t1 pt-full
.t1.pt-full { padding-top: 100%; }
Definition order.
t1 p-1 px-1 py-1 pt-1 pr-1 pb-1 pl-1
.t1.p-1 { padding: 1px; } .t1.px-1 { padding-left: 1px; padding-right: 1px; } .t1.py-1 { padding-top: 1px; padding-bottom: 1px; } .t1.pt-1 { padding-top: 1px; } .t1.pr-1 { padding-right: 1px; } .t1.pb-1 { padding-bottom: 1px; } .t1.pl-1 { padding-left: 1px; }