Размеры и отступы элементов
Размеры элементов можно менять непосредственно на Холсте. Этот способ удобно использовать для элементов с размерами, которые устанавливаются фиксированно и не будут меняться в зависимости от контента внутри них (например, для Картинок). При этом вы просто управляете размерами элемента, растягивая его за угол либо за контрол на одной из сторон.
Однако, этот способ не очень хорошо подходит для элементов, размер которых зависит от контента, размещенного в них. Если вы меняете размер элемента, перетягивая его границы на Холсте, у него будет установлен фиксированный размер. Например, при растягивании границы текстового элемента вниз, его высота примет значение 150px:
Это приведет к тому, что при добавлении текста в этот элемент он будет выходить за границы элемента:
Для более гибкой установки размеров элементов рекомендуется пользоваться настройками на вкладке Стилей (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% означает, что элемент займет всю высоту экрана.
Дополнительные параметры:
- Минимальная и Максимальная высота и ширина элемента (Min or Max)
Минимальные размеры позволяют установить ограничения на уменьшение элемента, так что он не станет меньше даже при небольшом количестве или полном отсутствии в нем контента. Это может использоваться, например, для создании Секции высотой во весь экран. При установке Минимальной высоты Секции 100vh она заполнит 100% высоты экрана даже при небольшом наполнении контентом, а в случае переполнения контентом станет больше, и содержимое не будет обрезано.
- Переполнение (Overflow)
Управление содержимым, выходящим за границы элемента при переполнении контентом.
Переполнение происходит автоматически, когда для элемента заданы фиксированные ширина и высота и недостаточно места для содержимого внутри.
По умолчанию не помещающийся текст виден — выбран значок Видимый (Visible).
Другие варианты переполнения:
- Скрыть (Hidden) Содержимое, выходящее за пределы границ элемента, скрыто.
- Прокрутка (Scroll) Отображается полоса прокрутки (в зависимости от операционной системы и браузера), чтобы пользователи могли прокручивать содержимое элемента.
- Автоматически (Auto) Позволяет пользователям прокручивать контент, если он переполняет элемент.
Для установки расстояния между элементами нужно задать значения отступов.
- Внешние отступы (Margins) Определяют пространство между границами элемента и соседними с ним элементами. Обозначаются желтым цветом.
- Внутренние отступы (Paddings) Определяют пространство между границами элемента и его содержимым. Обозначаются зеленым цветом.
Можно установить внешние и внутренние отступы как со всех сторон, так и выборочно.
Отступы можно устанавливать и менять непосредственно на Холсте или на вкладке Стилей.
Для установки внешних отступов (Margin):
- наведите курсор мыши на контрол на границе элемента и сместите его немного наружу от границы элемента до появления желтой двунаправленной стрелки
- зажмите левую кнопку мыши и потяните в нужном направлении
- внешний отступ подсветится желтым цветом, а его текущее значение будет указано на метке рядом со стрелкой
- достигнув нужного значения отступа, отпустите кнопку мыши
Для установки внутренних отступов (Padding):
- выделите элемент на Холсте
- наведите курсор мыши на контрол на границе элемента и сместите его немного внутрь элемента до появления зеленой двунаправленной стрелки
- зажмите левую кнопку мыши и потяните в нужном направлении
- внутренний отступ подсветится зеленым цветом, а его текущее значение будет указано на метке рядом со стрелкой
- достигнув нужного значения отступа, отпустите кнопку мыши
Для одновременного изменения отступов:
- с двух противоположных сторон элемента — при перетягивании стрелки мышью удерживайте клавишу Alt
- с четырех сторон элемента — при перетягивании стрелки мышью удерживайте клавишу Shift
Также вы можете настроить внешние и внутренние отступы на вкладке Стилей.
По умолчанию настройки отступов свернуты, таким образом вы можете одновременно задать парные отступы.
Чтобы задать отступы, установите значение, кликнув по текущему соответствующего отступа. Если хотите задать разные боковые (справа / слева) или верхние и нижние отступы, предварительно раскройте настройки.
Если парные отступы разные, они отобразятся как mixed.
Вы можете ввести нужное значение вручную или задать значение с помощью скрола мышкой.
По умолчанию размер отступов задан в пикселяхpx. Также вы можете задать размер в процентах или установить его в em, rem, vh или vw.
- Проценты %
Размер отступа устанавливается в процентах относительно размера родительского элемента.
- Em
Размер отступа определяется относительно размера шрифта элемента. 1em равен размеру шрифта элемента в пикселях. Размер меняется пропорционально изменениям размера шрифта элемента. Установка отступа в em может быть удобна для текстовых элементов при адаптации сайта для различных устройств. В этом случае при изменении размеров шрифта отступы элемента будут автоматически меняться.
- Rem
Размер отступа определяется относительно размера шрифта элемента. 1rem равен размеру шрифта элемента в пикселях. Размер меняется пропорционально изменениям размера шрифта элемента.
Для одновременного изменения отступов:
- с двух противоположных сторон элемента — при перетягивании стрелки мышью удерживайте клавишу Alt
- с четырех сторон элемента — при перетягивании стрелки мышью удерживайте клавишу Shift
Внешние отступы могут принимать отрицательные значения. При этом элемент смещается в соответствующую отступу сторону и накладывается на соседние элементы.
Внешним отступам можно установить не только фиксированное значение, но и значение auto. Установка auto для внешних отступов одновременно слева и справа используется для горизонтального центрирования элемента относительно родительского элемента.
