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

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

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

Компонент 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);