Размеры и отступы элементов
Размеры элементов можно менять непосредственно на Холсте. Этот способ удобно использовать для элементов с размерами, которые устанавливаются фиксированно и не будут меняться в зависимости от контента внутри них (например, для Картинок). При этом вы просто управляете размерами элемента, растягивая его за угол либо за контрол на одной из сторон.
Однако, этот способ не очень хорошо подходит для элементов, размер которых зависит от контента, размещенного в них. Если вы меняете размер элемента, перетягивая его границы на Холсте, у него будет установлен фиксированный размер. Например, при растягивании границы текстового элемента вниз, его высота примет значение 150px:
Это приведет к тому, что при добавлении текста в этот элемент он будет выходить за границы элемента:
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/7rDFHW45SfzYYG6o5f4Iy_izobrazhenie.png?format=webp)
Для более гибкой установки размеров элементов рекомендуется пользоваться настройками на вкладке Стилей (Styles) правой панели в разделе Размер (Size).
В настройках Размера можно установить ширину (W) и высоту (H) элемента.
По умолчанию высота большинства элементов автоматическая — auto. Это означает, что она подстраивается под его содержимое.
Параметры для установки размеров:
- Автоматический размер auto
Размер элемента устанавливается автоматически в зависимости от его содержимого.
- Пиксели px
Размер элемента устанавливается в пикселях (базовая единица измерения).
- Проценты %
Размер элемента устанавливается в процентах относительно размера родительского элемента. Размер будет меняться пропорционально изменениям размера родительского элемента. Значение 100% означает, что элемент занимает всю ширину родительского элемента.
- Em em
Размер элемента определяется относительно размера его шрифта. 1em равен размеру шрифта элемента в пикселях. Размер меняется пропорционально изменениям размера шрифта элемента. Размер определяется относительно размера шрифта родительского элемента. Если эти настройки не заданы, то рассчитываться будет относительно шрифта, установленного на слое Root.
- Rem rem
Размер элемента определяется относительно размера его шрифта. 1rem равен 16 px. Размер определяется относительно размера шрифта родительского элемента. Если эти настройки не заданы, 1 rem будет равен 16 px.
- Viewport Width vw
Размер элемента устанавливается в процентах от ширины окна браузера. 1vw равен 1% от текущей ширины окна браузера. Значение 100% означает, что элемент займет всю ширину экрана.
- Viewport Height vh
Размер элемента устанавливается в процентах от высоты окна браузера. 1vh равен 1% от текущей высоты окна браузера. Значение 100% означает, что элемент займет всю высоту экрана.
Дополнительные параметры:
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/nk18HLqMDJlrtlSWyIqxZ_izobrazhenie.png?format=webp)
- Минимальная и Максимальная высота и ширина элемента (Min or Max)
Минимальные размеры позволяют установить ограничения на уменьшение элемента, так что он не станет меньше даже при небольшом количестве или полном отсутствии в нем контента. Это может использоваться, например, для создании Секции высотой во весь экран. При установке Минимальной высоты Секции 100vh она заполнит 100% высоты экрана даже при небольшом наполнении контентом, а в случае переполнения контентом станет больше, и содержимое не будет обрезано.
- Переполнение (Overflow)
Управление содержимым, выходящим за границы элемента при переполнении контентом.
Переполнение происходит автоматически, когда для элемента заданы фиксированные ширина и высота и недостаточно места для содержимого внутри.
По умолчанию не помещающийся текст виден — выбран значок Видимый (Visible).
Другие варианты переполнения:
- Скрыть (Hidden) Содержимое, выходящее за пределы границ элемента, скрыто.
- Прокрутка (Scroll) Отображается полоса прокрутки (в зависимости от операционной системы и браузера), чтобы пользователи могли прокручивать содержимое элемента.
- Автоматически (Auto) Позволяет пользователям прокручивать контент, если он переполняет элемент.
Для установки расстояния между элементами нужно задать значения отступов.
- Внешние отступы (Margins) Определяют пространство между границами элемента и соседними с ним элементами. Обозначаются желтым цветом.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/gVCGDS18ZWvWxDRtZ91bv_selection003.png?format=webp)
- Внутренние отступы (Paddings) Определяют пространство между границами элемента и его содержимым. Обозначаются зеленым цветом.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/OS7ILO77kj2L8wKIoAor8_selection004.png?format=webp)
Можно установить внешние и внутренние отступы как со всех сторон, так и выборочно.
Отступы можно устанавливать и менять непосредственно на Холсте или на вкладке Стилей.
Для установки внешних отступов (Margin):
- наведите курсор мыши на контрол на границе элемента и сместите его немного наружу от границы элемента до появления желтой двунаправленной стрелки
- зажмите левую кнопку мыши и потяните в нужном направлении
- внешний отступ подсветится желтым цветом, а его текущее значение будет указано на метке рядом со стрелкой
- достигнув нужного значения отступа, отпустите кнопку мыши
Для установки внутренних отступов (Padding):
- выделите элемент на Холсте
- наведите курсор мыши на контрол на границе элемента и сместите его немного внутрь элемента до появления зеленой двунаправленной стрелки
- зажмите левую кнопку мыши и потяните в нужном направлении
- внутренний отступ подсветится зеленым цветом, а его текущее значение будет указано на метке рядом со стрелкой
- достигнув нужного значения отступа, отпустите кнопку мыши
Для одновременного изменения отступов:
- с двух противоположных сторон элемента — при перетягивании стрелки мышью удерживайте клавишу Alt
- с четырех сторон элемента — при перетягивании стрелки мышью удерживайте клавишу Shift
Также вы можете настроить внешние и внутренние отступы на вкладке Стилей.
![Внешние отступы Внешние отступы](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/LKQvRe1GNBvIQPhlqwwOd_screenshot-2023-12-26-at-180611.png?format=webp)
![Внутренние отступы Внутренние отступы](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/ONwGL6XyOEOwh-ktaoA6V_screenshot-2023-12-26-at-180629.png?format=webp)
По умолчанию настройки отступов свернуты, таким образом вы можете одновременно задать парные отступы.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/qAx-P42fKoCg0NGqt-ID3_image.png?format=webp)
Чтобы задать отступы, установите значение, кликнув по текущему соответствующего отступа. Если хотите задать разные боковые (справа / слева) или верхние и нижние отступы, предварительно раскройте настройки.
![Настройки отступов в раскрытом виде Настройки отступов в раскрытом виде](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/Qvw3zJvIaElAjtIT0Pywb_screenshot-2023-12-26-at-181014.png?format=webp)
Если парные отступы разные, они отобразятся как mixed.
![Заданы внешние отступы: разные боковые и одинаковые — сверху и снизу Заданы внешние отступы: разные боковые и одинаковые — сверху и снизу](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/zhVboDMd8HHfn4pkxnWgb_image.png?format=webp)
Вы можете ввести нужное значение вручную или задать значение с помощью скрола мышкой.
По умолчанию размер отступов задан в пикселяхpx. Также вы можете задать размер в процентах или установить его в em, rem, vh или vw.
- Проценты %
Размер отступа устанавливается в процентах относительно размера родительского элемента.
- Em
Размер отступа определяется относительно размера шрифта элемента. 1em равен размеру шрифта элемента в пикселях. Размер меняется пропорционально изменениям размера шрифта элемента. Установка отступа в em может быть удобна для текстовых элементов при адаптации сайта для различных устройств. В этом случае при изменении размеров шрифта отступы элемента будут автоматически меняться.
- Rem
Размер отступа определяется относительно размера шрифта элемента. 1rem равен размеру шрифта элемента в пикселях. Размер меняется пропорционально изменениям размера шрифта элемента.
Для одновременного изменения отступов:
- с двух противоположных сторон элемента — при перетягивании стрелки мышью удерживайте клавишу Alt
- с четырех сторон элемента — при перетягивании стрелки мышью удерживайте клавишу Shift
Внешние отступы могут принимать отрицательные значения. При этом элемент смещается в соответствующую отступу сторону и накладывается на соседние элементы.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/MYaQZx8z8i7MD2QzXJkCl_image.png?format=webp)
Внешним отступам можно установить не только фиксированное значение, но и значение auto. Установка auto для внешних отступов одновременно слева и справа используется для горизонтального центрирования элемента относительно родительского элемента.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/CqLRKAm2lbseyg6DCKEXL_image.png?format=webp)
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/Zlsf7URle_-u4mWjDwey7_izobrazhenie.png?format=webp)