---
title: Padding
position: 1
seo_title: Telerik and Kendo UI Padding Utilities
seo_description: The Telerik and Kendo UI Padding Utilities enable you to
  control the padding area of an element.
---

## Padding

The Telerik and Kendo UI Padding Utilities are CSS utility classes that enable you to control the padding area of an element.

<CSSRulesList data='{"id":"padding"}'></CSSRulesList>

### Padding for all sides

Use the `k-p-{size}` utility to set an equal padding to all four sides of an element.

<LiveDemo data='{"links":[],"demo":"utils/spacing/padding/all","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-bg-primary k-text-white k-rounded-md k-p-2 k-rounded-lg"}}'></LiveDemo>

### 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.

<LiveDemo data='{"links":[],"demo":"utils/spacing/padding/x","height":130,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-bg-primary k-text-white k-rounded-md k-p-2 k-rounded-lg"}}'></LiveDemo>

### 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.

<LiveDemo data='{"links":[],"demo":"utils/spacing/padding/y","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-bg-primary k-text-white k-rounded-md k-p-2 k-rounded-lg"}}'></LiveDemo>

### 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.

<LiveDemo data='{"links":[],"demo":"utils/spacing/padding/single","height":150,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-bg-primary k-text-white k-rounded-md k-p-2 k-rounded-lg"}}'></LiveDemo>

### Breakpoints

The responsive Padding utility classes are designed to enable you to responsively control the padding area of an element. Each class is composed of a base name, followed by a breakpoint identifier (`xs`, `sm`, `md`, `lg`, `xl` or `xxl`), and then a value or modifier.

<CSSRulesList data='{"id":"padding-responsive"}'></CSSRulesList>