Добрый день! Адаптивные размеры для блоков без текса можно задавать с использованием различных единиц измерения, таких как `vw`, `vh`, `rem`, и процентные значения. Вот несколько рекомендаций для определения адаптивных размеров `padding` и `margin`:
1. **Использование `rem`**: Если у вас установлен базовый размер шрифта для `<html>`, то вы можете использовать `rem` для задавания `padding` и `margin`. Это позволит вашим отступам адаптироваться в зависимости от изменения базового размера шрифта. Например:
```css
section {
padding: 2rem;
}
```
Затем, когда вы изменяете базовый размер шрифта (например, через медиа-запросы), все размеры в `rem` также будут изменяться соответственно.
2. **Процентные значения**: Вы можете задавать `padding` и `margin` в процентах, что делает их относительно размеров родительского блока. Это может быть полезно, если вы хотите, чтобы отступы изменялись в зависимости от ширины родителя.
```css
section {
padding: 5%;
}
```
3. **Использование `vw` / `vh`**: Вы можете использовать единицы `vw` (процент от ширины экрана) и `vh` (процент от высоты экрана) для задания адаптивных отступов. Например, для кнопки или секции можно использовать:
```css
section {
padding: 5vw;
}
```
4. **Комбинирование единиц**: Иногда имеет смысл комбинировать различные единицы для достижения более точного результата. Например, вы можете использовать `rem` для основных отступов и `vw` для дополнительных адаптивных отступов:
```css
section {
padding: 2rem 5vw;
}
```
5. **Использование CSS-функций**: Можно также использовать функции вроде `calc()` для более точного контроля над размерами отступов. Например:
```css
section {
padding: calc(1rem + 2vw);
}
```
6. **Медиа-запросы**: В некоторых случаях лучший подход — это просто использовать медиа-запросы, чтобы адаптировать стили для разных размеров экрана:
```css
section {
padding: 20px; /* базовый размер */
}
@media (min-width: 768px) {
section {
padding: 40px; /* увеличенный размер */
}
}
```
Эти подходы позволят вам эффективно задавать адаптивные размеры для `padding` и `margin`, даже если в блоках нет текстового контента. Выбор подхода зависит от вашей конкретной ситуации и того, как вы хотите, чтобы элементы адаптировались под разные размеры экранов.