# Утилиты (доп. классы)

# Интервалы

**Поля и отступы**

Устанавливает margin (внешние границы) или padding (внутренние границы) элементу по умолчанию в диапазоне от .25rem до 3rem.

**Форматы классов:**

- xs: {property}{sides}-{size}
- sm, md, lg, xl и xxl {property}{sides}-{breakpoint}-{size}

**Значения составляющих:**

property

- m - для классов, которые устанавливают margin
- p - для классов, которые устанавливают padding

sides

- t - margin-top или padding-top
- b - margin-bottom или padding-bottom
- s - margin-left или padding-left в LTR, margin-right или padding-right в RTL
- e - margin-right или padding-right в LTR, margin-left или padding-left в RTL
- x - \*-left и \*-right
- y - \*-top и \*-bottom
- blank - margin или padding со всех 4 сторон элемента

size

- 0 - устраняет margin или padding, установив его на 0
- 1 - margin или padding = $spacer \* .25
- 2 - margin или padding = $spacer \* .5
- 3 - margin или padding = $spacer
- 4 - margin или padding = $spacer \* 1.5
- 5 - margin или padding = $spacer \* 3
- auto - margin = авто

**Пример:**

```html
.mt-0 {
  margin-top: 0 !important;
}

.ms-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}
```

**Отрицательные отступы**

Margin могут использовать отрицательные значения (padding не может). Эти отрицательные поля отключены по умолчанию, но могут быть включены в Sass, установив $enable-negative-margins: true. Синтаксис почти такой же, как у утилит с положительным значением поля по умолчанию, но с добавлением n перед запрошенным размером.

**Пример**

Класс, противоположный .mt-1:

```html
.mt-n1 {
  margin-top: -0.25rem !important;
}
```