Интервалы

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

Устанавливает 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 = авто

Пример:

.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:

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