Margin & Padding CSS Classes

UIkit offers various margin and padding utilities to style your elements. You can use those classes in our Extensions to style your elements.

Margin

Class	Description
uk-margin-small	Adds a small margin to the element.
uk-margin	Adds a default margin to the element.
uk-margin-large	Adds a large margin to the element.

Dedicated Margin

You can easily add margin to the top, bottom, left or right of an element by using the following classes. simply replace the {x} with small or large to add a margin to the element.

Class	Description
uk-margin-{x}-bottom	Adds a (small / large) bottom margin to the element.
uk-margin-bottom	Adds a default bottom margin to the element.
uk-margin-{x}-top	Adds a (small / large) top margin to the element.
uk-margin-top	Adds a default top margin to the element.
uk-margin-{x}-right	Adds a (small / large) right margin to the element.
uk-margin-right	Adds a default right margin to the element.
uk-margin-{x}-left	Adds a (small / large) left margin to the element.
uk-margin-left	Adds a default left margin to the element.

Padding

Class	Description
uk-padding-small	Adds a small padding to the element.
uk-padding	Adds a default padding to the element.
uk-padding-large	Adds a large padding to the element.

Dedicated Padding

You can easily add padding to the top, bottom, left or right of an element by using the following classes. simply replace the {x} with top, bottom, left or right. Or use small or large to add a padding to the element.

Class	Description
uk-padding-{x}-bottom	Adds a bottom padding to the element.
uk-padding-{x}-top	Adds a top padding to the element.
uk-padding-{x}-right	Adds a right padding to the element.
uk-padding-{x}-left	Adds a left padding to the element.