Shipyard’s padding utilities are useful for overriding the default padding in any component, and can be extremely useful in a wide array of situations.
.{ screen }-p-{ 0..40 }The examples below demonstrate how much padding will be added to the top and bottom of any element the classes is applied to.
.{ screen }-p{ t, b }-{ 0..40 }The examples below demonstrate how much padding will be added to the top and bottom of any element the classes is applied to.
.{ screen }-p{ l, r }-{ 0..40 }The examples below demonstrate how much padding will be added to the left and right sides of any element the classes is applied to
.p-0 { padding: 0 }
.p-5 { padding: 5px }
.p-10 { padding: 10px }
.p-15 { padding: 15px }
.p-20 { padding: 20px }
.p-30 { padding: 30px }
.p-40 { padding: 40px }
.pt-0 { padding-top: 0 }
.pb-0 { padding-bottom: 0 }
.pl-0 { padding-left: 0 }
.pr-0 { padding-right: 0 }
.pt-5 { padding-top: 5px }
.pb-5 { padding-bottom: 5px }
.pl-5 { padding-left: 5px }
.pr-5 { padding-right: 5px }
.pt-10 { padding-top: 10px }
.pb-10 { padding-bottom: 10px }
.pl-10 { padding-left: 10px }
.pr-10 { padding-right: 10px }
.pt-15 { padding-top: 15px }
.pb-15 { padding-bottom: 15px }
.pl-15 { padding-left: 15px }
.pr-15 { padding-right: 15px }
.pt-20 { padding-top: 20px }
.pb-20 { padding-bottom: 20px }
.pl-20 { padding-left: 20px }
.pr-20 { padding-right: 20px }
.pt-30 { padding-top: 30px }
.pb-30 { padding-bottom: 30px }
.pl-30 { padding-left: 30px }
.pr-30 { padding-right: 30px }
.pt-40 { padding-top: 40px }
.pb-40 { padding-bottom: 40px }
.pl-40 { padding-left: 40px }
.pr-40 { padding-right: 40px }
@media screen and (min-width: 576px) {
.sm:p-0 { padding: 0 }
.sm:p-5 { padding: 5px }
.sm:p-10 { padding: 10px }
.sm:p-15 { padding: 15px }
.sm:p-20 { padding: 20px }
.sm:p-30 { padding: 30px }
.sm:p-40 { padding: 40px }
.sm:pt-0 { padding-top: 0 }
.sm:pb-0 { padding-bottom: 0 }
.sm:pl-0 { padding-left: 0 }
.sm:pr-0 { padding-right: 0 }
.sm:pt-5 { padding-top: 5px }
.sm:pb-5 { padding-bottom: 5px }
.sm:pl-5 { padding-left: 5px }
.sm:pr-5 { padding-right: 5px }
.sm:pt-10 { padding-top: 10px }
.sm:pb-10 { padding-bottom: 10px }
.sm:pl-10 { padding-left: 10px }
.sm:pr-10 { padding-right: 10px }
.sm:pt-15 { padding-top: 15px }
.sm:pb-15 { padding-bottom: 15px }
.sm:pl-15 { padding-left: 15px }
.sm:pr-15 { padding-right: 15px }
.sm:pt-20 { padding-top: 20px }
.sm:pb-20 { padding-bottom: 20px }
.sm:pl-20 { padding-left: 20px }
.sm:pr-20 { padding-right: 20px }
.sm:pt-30 { padding-top: 30px }
.sm:pb-30 { padding-bottom: 30px }
.sm:pl-30 { padding-left: 30px }
.sm:pr-30 { padding-right: 30px }
.sm:pt-40 { padding-top: 40px }
.sm:pb-40 { padding-bottom: 40px }
.sm:pl-40 { padding-left: 40px }
.sm:pr-40 { padding-right: 40px }
}
@media screen and (min-width: 768px) {
.md:p-0 { padding: 0 }
.md:p-5 { padding: 5px }
.md:p-10 { padding: 10px }
.md:p-15 { padding: 15px }
.md:p-20 { padding: 20px }
.md:p-30 { padding: 30px }
.md:p-40 { padding: 40px }
.md:pt-0 { padding-top: 0 }
.md:pb-0 { padding-bottom: 0 }
.md:pl-0 { padding-left: 0 }
.md:pr-0 { padding-right: 0 }
.md:pt-5 { padding-top: 5px }
.md:pb-5 { padding-bottom: 5px }
.md:pl-5 { padding-left: 5px }
.md:pr-5 { padding-right: 5px }
.md:pt-10 { padding-top: 10px }
.md:pb-10 { padding-bottom: 10px }
.md:pl-10 { padding-left: 10px }
.md:pr-10 { padding-right: 10px }
.md:pt-15 { padding-top: 15px }
.md:pb-15 { padding-bottom: 15px }
.md:pl-15 { padding-left: 15px }
.md:pr-15 { padding-right: 15px }
.md:pt-20 { padding-top: 20px }
.md:pb-20 { padding-bottom: 20px }
.md:pl-20 { padding-left: 20px }
.md:pr-20 { padding-right: 20px }
.md:pt-30 { padding-top: 30px }
.md:pb-30 { padding-bottom: 30px }
.md:pl-30 { padding-left: 30px }
.md:pr-30 { padding-right: 30px }
.md:pt-40 { padding-top: 40px }
.md:pb-40 { padding-bottom: 40px }
.md:pl-40 { padding-left: 40px }
.md:pr-40 { padding-right: 40px }
}
@media screen and (min-width: 992px) {
.lg:p-0 { padding: 0 }
.lg:p-5 { padding: 5px }
.lg:p-10 { padding: 10px }
.lg:p-15 { padding: 15px }
.lg:p-20 { padding: 20px }
.lg:p-30 { padding: 30px }
.lg:p-40 { padding: 40px }
.lg:pt-0 { padding-top: 0 }
.lg:pb-0 { padding-bottom: 0 }
.lg:pl-0 { padding-left: 0 }
.lg:pr-0 { padding-right: 0 }
.lg:pt-5 { padding-top: 5px }
.lg:pb-5 { padding-bottom: 5px }
.lg:pl-5 { padding-left: 5px }
.lg:pr-5 { padding-right: 5px }
.lg:pt-10 { padding-top: 10px }
.lg:pb-10 { padding-bottom: 10px }
.lg:pl-10 { padding-left: 10px }
.lg:pr-10 { padding-right: 10px }
.lg:pt-15 { padding-top: 15px }
.lg:pb-15 { padding-bottom: 15px }
.lg:pl-15 { padding-left: 15px }
.lg:pr-15 { padding-right: 15px }
.lg:pt-20 { padding-top: 20px }
.lg:pb-20 { padding-bottom: 20px }
.lg:pl-20 { padding-left: 20px }
.lg:pr-20 { padding-right: 20px }
.lg:pt-30 { padding-top: 30px }
.lg:pb-30 { padding-bottom: 30px }
.lg:pl-30 { padding-left: 30px }
.lg:pr-30 { padding-right: 30px }
.lg:pt-40 { padding-top: 40px }
.lg:pb-40 { padding-bottom: 40px }
.lg:pl-40 { padding-left: 40px }
.lg:pr-40 { padding-right: 40px }
}
@media screen and (min-width: 1200px) {
.xl:p-0 { padding: 0 }
.xl:p-5 { padding: 5px }
.xl:p-10 { padding: 10px }
.xl:p-15 { padding: 15px }
.xl:p-20 { padding: 20px }
.xl:p-30 { padding: 30px }
.xl:p-40 { padding: 40px }
.xl:pt-0 { padding-top: 0 }
.xl:pb-0 { padding-bottom: 0 }
.xl:pl-0 { padding-left: 0 }
.xl:pr-0 { padding-right: 0 }
.xl:pt-5 { padding-top: 5px }
.xl:pb-5 { padding-bottom: 5px }
.xl:pl-5 { padding-left: 5px }
.xl:pr-5 { padding-right: 5px }
.xl:pt-10 { padding-top: 10px }
.xl:pb-10 { padding-bottom: 10px }
.xl:pl-10 { padding-left: 10px }
.xl:pr-10 { padding-right: 10px }
.xl:pt-15 { padding-top: 15px }
.xl:pb-15 { padding-bottom: 15px }
.xl:pl-15 { padding-left: 15px }
.xl:pr-15 { padding-right: 15px }
.xl:pt-20 { padding-top: 20px }
.xl:pb-20 { padding-bottom: 20px }
.xl:pl-20 { padding-left: 20px }
.xl:pr-20 { padding-right: 20px }
.xl:pt-30 { padding-top: 30px }
.xl:pb-30 { padding-bottom: 30px }
.xl:pl-30 { padding-left: 30px }
.xl:pr-30 { padding-right: 30px }
.xl:pt-40 { padding-top: 40px }
.xl:pb-40 { padding-bottom: 40px }
.xl:pl-40 { padding-left: 40px }
.xl:pr-40 { padding-right: 40px }
}