Компонент Внешний отступ Margin
Коллекция вспомогательных классов для добавления внешних отступов. Автоматическое добавление отступов в UIkit 3. Разметка. Примеры. Руководство.
Коллекция вспомогательных классов для добавления расстояния между элементами, от одного блока до другого, межблоковое пространство; возможность установить внешний отступ от каждого края элемента.
Компонент Margin позволяет задать величину отступа для всех сторон элемента или определить ее только для указанных сторон.
Руководство
Добавьте один или несколько из следующих классов к любому элементу, чтобы создать вертикальное и / или горизонтальное поле, которое обычно имеет абзац.
Класс | Описание |
---|---|
.uk-margin |
Определяет внешний отступ для верхней стороны, если ему предшествует другой элемент, и всегда нижний отступ. |
.uk-margin-top |
Определяет внешний отступ для верхней стороны. |
.uk-margin-bottom |
Определяет внешний отступ для нижней стороны. |
.uk-margin-left |
Установит внешний отступ для левой стороны. |
.uk-margin-right |
Установит внешний отступ для правой стороны. |
* по умлочанию внешний отступ составляет 20px |
<div class="uk-margin"></div>
Модификатор «Small»
Добавьте один из следующих классов, чтобы добавить небольшой внешний отступ блочным элементам.
Класс | Описание |
---|---|
.uk-margin-small |
Добавляет небольшой внешний отступ для верхней стороны, если ему предшествует другой элемент, и всегда нижний отступ. |
.uk-margin-small-top |
Задает небольшой внешний отступ от верхнего края. |
.uk-margin-small-bottom |
Задает небольшой внешний отступ от нижнего края. |
.uk-margin-small-left |
Устанавливает небольшой внешний отступ от левого края. |
.uk-margin-small-right |
Устанавливает небольшой внешний отступ от правого края. |
* по умлочанию небольшой отступ равен 10px |
- Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Маленький ручеек Даль журчит по всей стране.Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни.
-
<div class="uk-margin-small uk-card uk-card-default uk-card-body">Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Маленький ручеек Даль журчит по всей стране.</div> <div class="uk-margin-small uk-card uk-card-default uk-card-body">Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни.</div>
Модификатор «Medium»
Добавьте один из следующих классов, чтобы добавить средний внешний отступ (поле).
Класс | Описание |
---|---|
.uk-margin-medium |
Добавляет средний внешний отступ для верхней стороны, если ему предшествует другой элемент, и всегда нижний отступ. |
.uk-margin-medium-top |
Средний отступ будет установлен от верхнего края элемента. |
.uk-margin-medium-bottom |
Средний отступ будет установлен от нижнего края элемента. |
.uk-margin-medium-left |
Средний отступ будет установлен от левого края элемента. |
.uk-margin-medium-right |
Средний отступ будет установлен от правого края элемента. |
* средний отступ по умлочанию равен 40px |
- Сегодня была на рынке и узнала, что у нас есть три размера одежды: "на вас", "не на вас" и "надо мерить"!...И только нашему мужику, чтобы переодеться в домашнее, нужно просто раздеться до трусов...
-
<div class="uk-margin-medium uk-card uk-card-default uk-card-body">Сегодня была на рынке и узнала, что у нас есть три размера одежды: "на вас", "не на вас" и "надо мерить"!</div> <div class="uk-margin-medium uk-card uk-card-default uk-card-body">...И только нашему мужику, чтобы переодеться в домашнее, нужно просто раздеться до трусов...</div>
Модификатор «Large»
Добавьте один из следующих классов, чтобы добавить большой внешний отступ от одного блока до другого.
Класс | Описание |
---|---|
.uk-margin-large |
Добавляет большой внешний отступ для верхней стороны, если ему предшествует другой элемент, и всегда нижний отступ. |
.uk-margin-large-top |
Установит большой отступ от верхнего края элемента. |
.uk-margin-large-bottom |
Установит большой отступ от нижнего края элемента. |
.uk-margin-large-left |
Установит большой отступ от левого края элемента. |
.uk-margin-large-right |
Установит большой отступ от правого края элемента. |
* большой отступ по умлочанию равен 70px |
- Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить себя с толку.Взобравшись на первую вершину курсивных гор, бросил он последний взгляд назад, на силуэт своего родного города Буквоград.
-
<div class="uk-margin-large uk-card uk-card-default uk-card-body">Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить себя с толку.</div> <div class="uk-margin-large uk-card uk-card-default uk-card-body">Взобравшись на первую вершину курсивных гор, бросил он последний взгляд назад, на силуэт своего родного города Буквоград.</div>
Модификатор «XLarge»
Добавьте один из следующих классов, чтобы добавить очень большой внешний отступ от края элемента блока.
Класс | Описание |
---|---|
.uk-margin-xlarge |
Добавляет очень большой внешний отступ для верхней стороны, если ему предшествует другой элемент, и всегда нижний отступ. |
.uk-margin-xlarge-top |
Установит очень большой внешний отступ для верхней стороны. |
.uk-margin-xlarge-bottom |
Установит очень большой внешний отступ для нижней стороны. |
.uk-margin-xlarge-left |
Добавляется очень большой внешний отступ слева. |
.uk-margin-xlarge-right |
Добавляется очень большой внешний отступ справа. |
* очень большой отступ по умлочанию равен 140px |
- Если права поговорка, что если птичка на вас накакала, это точно к деньгам, то, для того чтобы сказочно разбогатеть, надо провести ночь в курятнике.Готовя на выброс коробки со старым хламом, не рассматривайте их содержимое, иначе выкидывать будет нечего.
-
<div class="uk-margin-xlarge uk-card uk-card-default uk-card-body">Если права поговорка, что если птичка на вас накакала, это точно к деньгам, то, для того чтобы сказочно разбогатеть, надо провести ночь в курятнике.</div> <div class="uk-margin-xlarge uk-card uk-card-default uk-card-body">Готовя на выброс коробки со старым хламом, не рассматривайте их содержимое, иначе выкидывать будет нечего.</div>
Модификатор «Remove»
Добавьте один из следующих классов, чтобы удалить отступы от внешней границы элемента.
Класс | Описание |
---|---|
.uk-margin-remove |
Удаляются все внешние отступы. |
.uk-margin-remove-top |
Убирает верхний отступ. |
.uk-margin-remove-bottom |
Убирает нижний отступ. |
.uk-margin-remove-left |
Убирает отступ от левого края элемента. |
.uk-margin-remove-right |
Убирает отступ от правого края элемента. |
.uk-margin-remove-vertical |
Убираются все вертикальные отступы. |
.uk-margin-remove-adjacent |
Удаляет верхнее поле непосредственно следующего элемента. |
.uk-margin-remove-first-child |
Удаляет верхнее поле первого дочернего элемента. |
<h1 class="uk-margin-remove"></h1>
Отзывчивость и удаление
Фреймворк UIkit 3 предоставляет ряд адаптивных классов для удаления внешних отступов. По сути, они работают так же, как обычные классы удаления полей, за исключением того, что у них есть суффиксы, представляющие точку останова, с которой они вступают в силу.
Класс | Описание |
---|---|
.uk-margin-remove-left@s .uk-margin-remove-right@s |
Влияет на ширину устройства от 640px и более. |
.uk-margin-remove-left@m .uk-margin-remove-right@m |
Влияет на ширину устройства от 960px и более. |
.uk-margin-remove-left@l .uk-margin-remove-right@l |
Влияет на ширину устройства от 1200px и более. |
.uk-margin-remove-left@xl .uk-margin-remove-right@xl |
Влияет на ширину устройства от 1600px и более. |
Плюшка «Auto margin»
Добавьте один из следующих классов, чтобы размер отступа был установлен в значение auto
.
Это может быть полезно для центрирования или иного выравнивания блочных элементов с фиксированной шириной,
а также для гибких flex-элементов.
Класс | Описание |
---|---|
.uk-margin-auto |
Устанавливает величину отступа от левого и правого края элемента в значение auto ;горизонтальное выравнивание блока и flex -элементов. |
.uk-margin-auto-top |
Задаёт величину отступа от верхнего края в зачение auto ;блок и flex перемещаются вниз. |
.uk-margin-auto-bottom |
Задаёт величину отступа от нижнего края в зачение auto ;блок и flex перемещаются вверх. |
.uk-margin-auto-left |
Задаёт величину отступа от левого края в зачение auto ;блок и flex перемещаются в право. |
.uk-margin-auto-right |
Задаёт величину отступа от правого края в зачение auto . |
.uk-margin-auto-vertical |
Верхнему и нижнему отступу устанавливается зачение auto , вертикально центрируя flex-элементы. |
Примеры Margin Auto
- Flex > Margin auto-left
-
<div class="uk-flex _test uk-height-small uk-background-muted uk-margin"> <div class="uk-margin-auto-left _test uk-card uk-card-default uk-card-body"> <div>Flex > Margin <em>auto-left</em></div> </div> </div>
- Block elementFlex item
-
<div class="uk-margin uk-margin-auto-left uk-width-1-2@s uk-card uk-card-default uk-card-body uk-text-center">Block element</div> <div class="uk-flex uk-height-medium uk-background-muted uk-margin uk-text-center"> <div class="uk-margin-auto uk-margin-auto-vertical uk-width-1-2@s uk-card uk-card-default uk-card-body">Flex item</div> </div>
Отзывчивость «Auto margin»
Отзывчивые классы -auto-
Фреймворк UIkit 3 имеет ряд адаптивных классов для классов с *-margin-auto-*
.
По сути, они работают так же, как обычные автоклассы margin,
за исключением того, что у них есть суффиксы, представляющие точку останова, с которой они вступают в силу.
Класс | Описание |
---|---|
.uk-margin-auto-left@s .uk-margin-auto@s .uk-margin-auto-right@s |
Влияет на ширину устройства от 640px и более. |
.uk-margin-auto-left@m .uk-margin-auto@m .uk-margin-auto-right@m |
Влияет на ширину устройства от 960px и более. |
.uk-margin-auto-left@l .uk-margin-auto@l .uk-margin-auto-right@l |
Влияет на ширину устройства от 1200px и более. |
.uk-margin-auto-left@xl .uk-margin-auto@xl .uk-margin-auto-right@xl |
Влияет на ширину устройства от 1600px и более. |
- Пример. БлокПример. БлокПример. Блок
-
<div class="uk-margin uk-margin-auto-right uk-margin-auto@m uk-width-1-2@s uk-card uk-card-default uk-card-body uk-text-center">Пример. Блок</div> <div class="uk-margin uk-margin-auto uk-margin-auto-left@m uk-width-1-2@s uk-card uk-card-default uk-card-body uk-text-center">Пример. Блок</div> <div class="uk-margin uk-margin-auto-left uk-margin-auto-right@m uk-width-1-2@s uk-card uk-card-default uk-card-body uk-text-center">Пример. Блок</div>
Автоматическое добавление отступов
Иногда требуется автоматическое добавление отступов (полей), например встроенным элементам, которые будут перестроены на меньших областях просмотра. Для этого необходимо добавить атрибут uk-margin
в их родительский контейнер. Это автоматически добавит класс .uk-margin-small-top
к нижнему элементу.
<div uk-margin>
<button></button>
<button></button>
</div>
Примеры
Автоматическое добавление отступов
-
-
<div uk-margin> <button class="uk-button uk-button-default">Кнопка</button> <button class="uk-button uk-button-default">Кнопка</button> <button class="uk-button uk-button-default">Кнопка</button> <button class="uk-button uk-button-default">Кнопка</button> <button class="uk-button uk-button-default">Кнопка</button> <button class="uk-button uk-button-default">Пример</button> <button class="uk-button uk-button-default">Пример</button> <button class="uk-button uk-button-default">Пример</button> <button class="uk-button uk-button-default">Пример</button> <button class="uk-button uk-button-default">Пример</button> </div>
-
-
<div uk-margin="margin: uk-margin-medium-top"> <button class="uk-button uk-button-default">Кнопка</button> <button class="uk-button uk-button-default">Кнопка</button> <button class="uk-button uk-button-default">Кнопка</button> <button class="uk-button uk-button-default">Кнопка</button> <button class="uk-button uk-button-default">Кнопка</button> <button class="uk-button uk-button-default">Пример</button> <button class="uk-button uk-button-default">Пример</button> <button class="uk-button uk-button-default">Пример</button> <button class="uk-button uk-button-default">Пример</button> <button class="uk-button uk-button-default">Пример</button> </div>
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.margin(element, options);