---
title: Margin
position: 2
seo_title: Telerik and Kendo UI Margin Utilities
seo_description: Use the Telerik and Kendo UI Margin Utilities to control the
  margin area of an element.
---
## Margin

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

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

### Margin for All Sides

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

<LiveDemo data='{"links":[],"demo":"utils/spacing/margin/all","height":200,"codePreviewSettings":{"filterSelector":".k-m-4","ignoreClassNames":"k-w-20 k-h-20 k-d-flex k-justify-content-center k-align-items-center k-bg-secondary k-text-white"}}'></LiveDemo>

### Inline Margin

Use the `k-mx-{size}` utility to set a start and end margin of the writing direction. For the left-to-right writing direction, this must be a horizontal margin.

<LiveDemo data='{"links":[],"demo":"utils/spacing/margin/x","height":150,"codePreviewSettings":{"filterSelector":".k-my-4","ignoreClassNames":"k-p-5 k-bg-secondary k-text-white"}}'></LiveDemo>

### Block Margin

Use the `k-my-{size}` utility to set a start and end margin of the writing direction. For the left-to-right writing direction this must be a vertical margin.

<LiveDemo data='{"links":[],"demo":"utils/spacing/margin/y","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-p-5 k-rounded-md k-rounded-lg"}}'></LiveDemo>

### Margin for One Side

Use the `k-m{t|r|b|l}-{size}` class to set a margin to the correspondent side of an element. The `k-mt-{size}` utility sets the top, `k-mr-{size}` the right, `k-mb-{size}` the bottom, and `k-ml-{size}` the left margin.

<LiveDemo data='{"links":[],"demo":"utils/spacing/margin/single","height":200,"codePreviewSettings":{"filterSelector":".k-p-5","ignoreClassNames":"k-p-5 k-bg-secondary k-text-white"}}'></LiveDemo>