Layouts/Paddings

fd-padding-begin-end · 4 examples from SAP's documentation · Back to the gallery

About

The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element. We now provide a number of predefined padding clases which add predefined padding values.

All-Round Padding

All-round padding appears on all sides of the container they are applied to. Use \

container

Double-Sided Padding

Double sided paddings appear on two opposite sides of the element. Use \

container(tiny)
container(sm)
container(md)
container(lg)

NoPadding

No padding classes remove existing container paddings. Use \

container

ResponsivePadding

The responsive padding class adds a double sided padding inside a container based on its width. Use \

container(sm)
container(md)
container(lg)
container(xl)