The responsive spacing system uses responsive padding and margin style sheet classes to control and optimize padding between elements that are common to all SAP Fiori interfaces.

Responsive Padding and Margin Classes

Responsive padding and margin classes control:

• The left and right spacing within the header and content areas
• The space between components, such as tables and forms

These classes adapt to different screen sizes at specific breakpoints to ensure that no space is wasted on small screens and that content has more room to breathe on large screens:

• Size S screen: Up to 599 pixels
• Size M screen: Between 600 pixels and 1023 pixels
• Size L screen: Between 1024 pixels and 1439 pixels
• Size XL screen: 1440 pixels or more

The visual below illustrates how the padding adapts to different screen sizes.

Resources