Размеры и отступы элементов

Установка размеров элементов

Размеры элементов можно менять непосредственно на Холсте .Этот способ удобно использовать для элементов с размерами, которые устанавливаются фиксированно и не будут меняться в зависимости от контента внутри них (например, для Картинок). При этом вы просто управляете размерами элемента, растягивая его за угол либо за контрол на одной из сторон.

Однако, этот способ не очень хорошо подходит для элементов, размер которых зависит от контента, размещенного в них. Если вы меняете размер элемента, перетягивая его границы на Холсте, у него будет установлен фиксированный размер. Например, при растягивании границы текстового элемента вниз, его высота примет значение 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) Контент, выходящий за границы элемента, скрыт. Скролл не добавляется.

Обрезать (Clip) Контент обрезается с учетом внутренних отступов родительского элемента без добавления скролла.

Прокрутка (Scroll) Контент обрезается по границам блока. При этом появляется скролл (в зависимости от операционной системы и браузера), чтобы пользователи могли прокручивать содержимое элемента.

Автоматически (Auto) Скролл появляется только при переполнении блока.

Видео: Единицы измерения CSS

Расстояние между элементами

Для установки расстояния между элементами нужно задать значения отступов.

Типы отступов:

Внешние отступы(Margins) Определяют пространство между границами элемента и соседними с ним элементами. Обозначаются желтым цветом.

Внутренние отступы(Paddings) Определяют пространство между границами элемента и его содержимым. Обозначаются зеленым цветомМожно установить внешние и внутренние отступы как со всех сторон, так и выборочно.Отступы можно устанавливать и менять непосредственно на Холсте или на вкладке Стилей. Установка отступов на Холсте Для установки внешних отступов (Margin):

выделите элемент наХолсте

наведите курсор мыши на контрол на границе элемента и сместите его немного наружу от границы элемента до появления желтой двунаправленной стрелки

зажмите левую кнопку мыши и потяните в нужном направлении

внешний отступ подсветится желтым цветом, а его текущее значение будет указано на метке рядом со стрелкой

достигнув нужного значения отступа, отпустите кнопку мыши

Для установки внутренних отступов (Padding):

выделите элемент на Холсте

наведите курсор мыши на контрол на границе элемента и сместите его немного внутрь элемента до появления зеленой двунаправленной стрелки

зажмите левую кнопку мыши и потяните в нужном направлении

внутренний отступ подсветится зеленым цветом, а его текущее значение будет указано на метке рядом со стрелкой

достигнув нужного значения отступа, отпустите кнопку мыши

Установка отступов на вкладке Стилей

Также вы можете настроить внешние и внутренние отступы навкладке Стилей.

По умолчанию настройки отступов свернуты, таким образом вы можете одновременно задать парные отступы.

Чтобы задать отступы, установите значение, кликнув по текущему соответствующего отступа. Если хотите задать разные боковые (справа / слева) или верхние и нижние отступы, предварительно раскройте настройки.

Если парные отступы разные, они отобразятся как mixed .

По умолчанию размер отступов задан в пикселях px. Также вы можете задать размер в процентах или установить его в em, rem, vh или vw.

Проценты %

Размер отступа устанавливается в процентах относительно размера родительского элемента.

Em

Размер отступа определяется относительно размера шрифта элемента. 1em равен размеру шрифта элемента в пикселях. Размер меняется пропорционально изменениям размера шрифта элемента. Установка отступа в em может быть удобна для текстовых элементов при адаптации сайта для различных устройств. В этом случае при изменении размеров шрифта отступы элемента будут автоматически меняться.

Rem

Размер отступа определяется относительно размера шрифта элемента. 1rem равен размеру шрифта элемента в пикселях. Размер меняется пропорционально изменениям размера шрифта элемента.

Viewport Width vw

Размер отступа устанавливается в процентах от ширины окна браузера. 1vw равен 1% от текущей ширины окна браузера. Значение 100% означает, что элемент займет всю ширину экрана.

Viewport Height vh

Размер отступа устанавливается в процентах от высоты окна браузера. 1vh равен 1% от текущей высоты окна браузера. Значение 100% означает, что элемент займет всю высоту экрана.

Автоматический размер auto

Размер отступа устанавливается автоматически. Этот вариант доступен только для внешних отступов и используется для центрирования или сдвига контента элемента.

Отрицательный внешний отступ

Внешние отступы могут принимать отрицательные значения. При этом элемент смещается в соответствующую отступу сторону и накладывается на соседние элементы.

Горизонтальное центрирование элемента с помощью внешних отступов

Внешним отступам можно установить не только фиксированное значение, но и значение auto. Установка auto для внешних отступов одновременно слева и справа используется для горизонтального центрирования элемента относительно родительского элемента.