Padding
The Telerik and Kendo UI Padding Utilities are CSS utility classes that enable you to control the padding area of an element.
| Utility Class | CSS Property |
|---|---|
.k-p-0 | padding: 0; |
.k-p-1px | padding: 1px; |
.k-p-1 | padding: 0.25rem; |
.k-p--1px | padding: -1px; |
.k-p--1 | padding: -0.25rem; |
.k-p-xs | padding: 0.25rem; |
.k-p-sm | padding: 0.5rem; |
.k-p-md | padding: 0.75rem; |
.k-p-lg | padding: 1rem; |
.k-p-xl | padding: 1.5rem; |
.k-p-thin | padding: 0.125rem; |
.k-p-hair | padding: 1px; |
.k-p-auto | padding: auto; |
.k-pt-0 | padding-top: 0; |
.k-pt-1px | padding-top: 1px; |
.k-pt-1 | padding-top: 0.25rem; |
.k-pt--1px | padding-top: -1px; |
.k-pt--1 | padding-top: -0.25rem; |
.k-pt-xs | padding-top: 0.25rem; |
.k-pt-sm | padding-top: 0.5rem; |
.k-pt-md | padding-top: 0.75rem; |
.k-pt-lg | padding-top: 1rem; |
.k-pt-xl | padding-top: 1.5rem; |
.k-pt-thin | padding-top: 0.125rem; |
.k-pt-hair | padding-top: 1px; |
.k-pt-auto | padding-top: auto; |
.k-pr-0 | padding-right: 0; |
.k-pr-1px | padding-right: 1px; |
.k-pr-1 | padding-right: 0.25rem; |
.k-pr--1px | padding-right: -1px; |
.k-pr--1 | padding-right: -0.25rem; |
.k-pr-xs | padding-right: 0.25rem; |
.k-pr-sm | padding-right: 0.5rem; |
.k-pr-md | padding-right: 0.75rem; |
.k-pr-lg | padding-right: 1rem; |
.k-pr-xl | padding-right: 1.5rem; |
.k-pr-thin | padding-right: 0.125rem; |
.k-pr-hair | padding-right: 1px; |
.k-pr-auto | padding-right: auto; |
.k-pb-0 | padding-bottom: 0; |
.k-pb-1px | padding-bottom: 1px; |
.k-pb-1 | padding-bottom: 0.25rem; |
.k-pb--1px | padding-bottom: -1px; |
.k-pb--1 | padding-bottom: -0.25rem; |
.k-pb-xs | padding-bottom: 0.25rem; |
.k-pb-sm | padding-bottom: 0.5rem; |
.k-pb-md | padding-bottom: 0.75rem; |
.k-pb-lg | padding-bottom: 1rem; |
.k-pb-xl | padding-bottom: 1.5rem; |
.k-pb-thin | padding-bottom: 0.125rem; |
.k-pb-hair | padding-bottom: 1px; |
.k-pb-auto | padding-bottom: auto; |
.k-pl-0 | padding-left: 0; |
.k-pl-1px | padding-left: 1px; |
.k-pl-1 | padding-left: 0.25rem; |
.k-pl--1px | padding-left: -1px; |
.k-pl--1 | padding-left: -0.25rem; |
.k-pl-xs | padding-left: 0.25rem; |
.k-pl-sm | padding-left: 0.5rem; |
.k-pl-md | padding-left: 0.75rem; |
.k-pl-lg | padding-left: 1rem; |
.k-pl-xl | padding-left: 1.5rem; |
.k-pl-thin | padding-left: 0.125rem; |
.k-pl-hair | padding-left: 1px; |
.k-pl-auto | padding-left: auto; |
.k-px-0 | padding-inline: 0; |
.k-px-1px | padding-inline: 1px; |
.k-px-1 | padding-inline: 0.25rem; |
.k-px--1px | padding-inline: -1px; |
.k-px--1 | padding-inline: -0.25rem; |
.k-px-xs | padding-inline: 0.25rem; |
.k-px-sm | padding-inline: 0.5rem; |
.k-px-md | padding-inline: 0.75rem; |
.k-px-lg | padding-inline: 1rem; |
.k-px-xl | padding-inline: 1.5rem; |
.k-px-thin | padding-inline: 0.125rem; |
.k-px-hair | padding-inline: 1px; |
.k-px-auto | padding-inline: auto; |
.k-py-0 | padding-block: 0; |
.k-py-1px | padding-block: 1px; |
.k-py-1 | padding-block: 0.25rem; |
.k-py--1px | padding-block: -1px; |
.k-py--1 | padding-block: -0.25rem; |
.k-py-xs | padding-block: 0.25rem; |
.k-py-sm | padding-block: 0.5rem; |
.k-py-md | padding-block: 0.75rem; |
.k-py-lg | padding-block: 1rem; |
.k-py-xl | padding-block: 1.5rem; |
.k-py-thin | padding-block: 0.125rem; |
.k-py-hair | padding-block: 1px; |
.k-py-auto | padding-block: auto; |
Padding for all sides
Use the k-p-{size} utility to set an equal padding to all four sides of an element.
Inline padding
Use the k-px-{size} utility to set the start and end padding of the writing direction. For the left-to-right writing direction this should be horizontal padding.
Block padding
Use the k-py-{size} utility to set the start and end padding of the writing direction. For the left-to-right writing direction this should be vertical padding.
Padding for one side
Use the k-p{t|r|b|l}-{size} class to set the padding to the correspondent side of an element. The k-pt-{size} utility sets the top, k-pr-{size} the right, k-pb-{size} the bottom, and k-pl-{size} the left padding.
