Компонент Внешний отступ

Коллекция вспомогательных классов для добавления внешних отступов. Автоматическое добавление отступов в UIkit 3. Разметка. Примеры. Руководство.

Коллекция вспомогательных классов для добавления расстояния между элементами, от одного блока до другого, межблоковое пространство; возможность установить внешний отступ от каждого края элемента.

Компонент Margin позволяет задать величину отступа для всех сторон элемента или определить ее только для указанных сторон.

Margin: Руководство

Добавьте один или несколько из следующих классов к любому элементу, чтобы создать вертикальное и / или горизонтальное поле, которое обычно имеет абзац.

Класс	Описание
`.uk-margin`	Определяет внешний отступ для верхней стороны, если ему предшествует другой элемент, и всегда нижний отступ.
`.uk-margin-top`	Определяет внешний отступ для верхней стороны.
`.uk-margin-bottom`	Определяет внешний отступ для нижней стороны.
`.uk-margin-left`	Установит внешний отступ для левой стороны.
`.uk-margin-right`	Установит внешний отступ для правой стороны.
	`*` по умлочанию внешний отступ составляет 20px

<div class="uk-margin"></div>

Этот мир очень странный. Если власть найдет на твоем дачном участке нефть, то она государственная, а если коноплю, то она твоя.

Женская одежда, по сути, делится на два вида - либо скрывает недостатки, либо выпячивает достоинства.

<div class="uk-margin uk-card uk-card-default uk-card-body">Этот мир очень странный. Если власть найдет на твоем дачном участке нефть, то она государственная, а если коноплю, то она твоя.</div>
<div class="uk-margin uk-card uk-card-default uk-card-body">Женская одежда, по сути, делится на два вида - либо скрывает недостатки, либо выпячивает достоинства.</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-top

Flex > Margin auto-bottom

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 &gt; Margin <em>auto-left</em></div>
    </div>
</div>

Block element

Flex 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>

Параметры для атрибута

При использовании компонента Margin к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опции компонента

Опция	Значение	По умолчанию	Описание
`margin`	String	`uk-margin-small-top`	Этот класс добавляется к элементам, которые разбиваются на следующую строку, как правило, для создания поля для предыдущей строки.
`first-column`	String	`uk-first-column`	Этот класс добавляется к первому элементу в каждой строке.

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

Инициализация

UIkit.margin(element, options);

Примеры Margin Auto

Отзывчивые классы -auto-

Опции компонента

Инициализация

Отзывчивые классы `-auto-`