Div

Пример использования

В компоненты Header и SimpleCell уже заложены стандартные платформенные отступы, поэтому не требуется никакой дополнительной конфигурации, чтобы выравнять эти элементы. Но если вы просто добавляете на страницу текстовый элемент (или свой пользовательский компонент) и хотите добиться визуального выравнивания, то используйте компонент Div.

Альтернатива

Если вы не хотите использовать дополнительную обёртку, то можно задать отступы с помощью CSS-переменных --vkui--size_base_padding_vertical--regular для верхнего и нижнего отступа и --vkui--size_base_padding_horizontal--regular для боковых отступов.

import styles from './MyComponent.module.css';
 
function MyComponent({ children }) {
  return <div className={styles.paddings}>{children}</div>;
}

.paddings {
  padding-top: var(--vkui--size_base_padding_vertical--regular);
  padding-bottom: var(--vkui--size_base_padding_vertical--regular);
  padding-left: var(--vkui--size_base_padding_horizontal--regular);
  padding-right: var(--vkui--size_base_padding_horizontal--regular);
}

Свойства и методы