Margin
The Telerik and Kendo UI Margin Utilities are CSS utility classes that enable you to control the margin area of an element.
| Utility Class | CSS Property |
|---|---|
.k-m-0 | margin: 0; |
.k-m-1px | margin: 1px; |
.k-m-1 | margin: 0.25rem; |
.k-m--1px | margin: -1px; |
.k-m--1 | margin: -0.25rem; |
.k-m-xs | margin: 0.25rem; |
.k-m-sm | margin: 0.5rem; |
.k-m-md | margin: 0.75rem; |
.k-m-lg | margin: 1rem; |
.k-m-xl | margin: 1.5rem; |
.k-m-thin | margin: 0.125rem; |
.k-m-hair | margin: 1px; |
.k-m-auto | margin: auto; |
.k-mt-0 | margin-top: 0; |
.k-mt-1px | margin-top: 1px; |
.k-mt-1 | margin-top: 0.25rem; |
.k-mt--1px | margin-top: -1px; |
.k-mt--1 | margin-top: -0.25rem; |
.k-mt-xs | margin-top: 0.25rem; |
.k-mt-sm | margin-top: 0.5rem; |
.k-mt-md | margin-top: 0.75rem; |
.k-mt-lg | margin-top: 1rem; |
.k-mt-xl | margin-top: 1.5rem; |
.k-mt-thin | margin-top: 0.125rem; |
.k-mt-hair | margin-top: 1px; |
.k-mt-auto | margin-top: auto; |
.k-mr-0 | margin-right: 0; |
.k-mr-1px | margin-right: 1px; |
.k-mr-1 | margin-right: 0.25rem; |
.k-mr--1px | margin-right: -1px; |
.k-mr--1 | margin-right: -0.25rem; |
.k-mr-xs | margin-right: 0.25rem; |
.k-mr-sm | margin-right: 0.5rem; |
.k-mr-md | margin-right: 0.75rem; |
.k-mr-lg | margin-right: 1rem; |
.k-mr-xl | margin-right: 1.5rem; |
.k-mr-thin | margin-right: 0.125rem; |
.k-mr-hair | margin-right: 1px; |
.k-mr-auto | margin-right: auto; |
.k-mb-0 | margin-bottom: 0; |
.k-mb-1px | margin-bottom: 1px; |
.k-mb-1 | margin-bottom: 0.25rem; |
.k-mb--1px | margin-bottom: -1px; |
.k-mb--1 | margin-bottom: -0.25rem; |
.k-mb-xs | margin-bottom: 0.25rem; |
.k-mb-sm | margin-bottom: 0.5rem; |
.k-mb-md | margin-bottom: 0.75rem; |
.k-mb-lg | margin-bottom: 1rem; |
.k-mb-xl | margin-bottom: 1.5rem; |
.k-mb-thin | margin-bottom: 0.125rem; |
.k-mb-hair | margin-bottom: 1px; |
.k-mb-auto | margin-bottom: auto; |
.k-ml-0 | margin-left: 0; |
.k-ml-1px | margin-left: 1px; |
.k-ml-1 | margin-left: 0.25rem; |
.k-ml--1px | margin-left: -1px; |
.k-ml--1 | margin-left: -0.25rem; |
.k-ml-xs | margin-left: 0.25rem; |
.k-ml-sm | margin-left: 0.5rem; |
.k-ml-md | margin-left: 0.75rem; |
.k-ml-lg | margin-left: 1rem; |
.k-ml-xl | margin-left: 1.5rem; |
.k-ml-thin | margin-left: 0.125rem; |
.k-ml-hair | margin-left: 1px; |
.k-ml-auto | margin-left: auto; |
.k-mx-0 | margin-inline: 0; |
.k-mx-1px | margin-inline: 1px; |
.k-mx-1 | margin-inline: 0.25rem; |
.k-mx--1px | margin-inline: -1px; |
.k-mx--1 | margin-inline: -0.25rem; |
.k-mx-xs | margin-inline: 0.25rem; |
.k-mx-sm | margin-inline: 0.5rem; |
.k-mx-md | margin-inline: 0.75rem; |
.k-mx-lg | margin-inline: 1rem; |
.k-mx-xl | margin-inline: 1.5rem; |
.k-mx-thin | margin-inline: 0.125rem; |
.k-mx-hair | margin-inline: 1px; |
.k-mx-auto | margin-inline: auto; |
.k-my-0 | margin-block: 0; |
.k-my-1px | margin-block: 1px; |
.k-my-1 | margin-block: 0.25rem; |
.k-my--1px | margin-block: -1px; |
.k-my--1 | margin-block: -0.25rem; |
.k-my-xs | margin-block: 0.25rem; |
.k-my-sm | margin-block: 0.5rem; |
.k-my-md | margin-block: 0.75rem; |
.k-my-lg | margin-block: 1rem; |
.k-my-xl | margin-block: 1.5rem; |
.k-my-thin | margin-block: 0.125rem; |
.k-my-hair | margin-block: 1px; |
.k-my-auto | margin-block: auto; |
Margin for All Sides
Use the k-m-{size} utility to set an equal margin to all four sides of an element.
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.
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.
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.
