Bootstrap 4 - Управление margin и padding отступами

Статья, в которой рассмотрим классы Bootstrap 4, с помощью которых можно не только очень просто, но и адаптивно добавлять margin и padding отступы.

Синтаксис классов для задания margin и padding отступов

Bootstrap 4 включает в себя набор классов, с помощью которых можно очень легко добавлять к HTML элементам необходимые margin и padding отступы.

Именуются эти классы следующим образом:

• {property}{sides}-{size} для xs;
• {property}{sides}-{breakpoint}-{size} для sm, md, lg, и xl.

Вместо {property} необходимо указать первую букву названия отступа, т.е. m или p (m – для margin, p – для padding).

Вместо {sides} необходимо указать сторону (t - для задания отступа только сверху, b – снизу, l – слева, r – справа) или несколько сторон (x – слева и справа, y – сверху и снизу). Если {sides} не указать, то тогда отступ будет установлен для всех 4 сторон элемента.

Вместо {breakpoint} нужно указать контрольную точку (sm, md, lg, или xl). Другими словами, определить минимальную ширину viewport, начиная с которой, отступы, задаваемые этим классом, будут действовать.

При этом необходимо помнить, что контрольные точки задают именно минимальную ширину viewport. Это означает, что, например, класс с sm будет действовать не только на sm, но и на всех следующих контрольных точках (sm->md->lg->xl). Т.е. до тех пор, пока его действие будет не переопределено с помощью другого класса (например, с помощью lg).

Вместо {size} необходимо задать величину отступа (посредством одного из следующих значений):

• 0 (равно 0);
• 1 (равно $spacer * .25);
• 2 (равно $spacer * .5);
• 3 (равно $spacer);
• 4 (равно $spacer * 1.5);
• 5 (равно $spacer * 3);
• auto (равно auto) - можно использовать только для margin.

$spacer - это SCSS переменная Bootstrap 4, значение которой, по умолчанию, равно 1rem. А 1rem в большинстве браузеров равен 16px. В итоге, например, размер 4 будет равен 24px (16px * 1.5).

Примеры использования

Рассмотрим примеры использования классов Bootstrap для установления HTML-элементам padding и margin оступов.

Пример 1. Установим HTML-элементу padding отступ сверху, равный 3:

<div class="pb-3">
    ...
</div>

Пример 2. Расположим 2 блока по центру. Для этого первому блоку установим в качестве свойства margin-left значение auto с помощью класса ml-auto, а второму margin-right:auto - с помощью класса mr-auto. Кроме этого дополнительно зададим отступ между блоками, с помощью классов mr-3 и ml-3.

<div class="container">
    <div class="row">
        <!-- Первый блок -->        
        <div class="col-4 ml-auto mr-3 bg-success" style="height: 200px;"></div>
        <!-- Второй блок --> 
        <div class="col-4 mr-auto ml-3 bg-danger" style="height: 200px;"></div>
    </div>
</div>

Пример 3. Установим блоку:

• margin отступы слева и справа, равные auto (mx-auto);
• на xs margin отступы сверху и снизу, равные 2 (my-2);
• на sm и md (т.е. >sm) margin отступы сверху и снизу, равные 3 (my-sm-3);
• на lg и xl (т.е. >lg) margin отступы сверху и снизу, равные 4 (my-lg-4);
• на всех контрольных точках padding отступы для 4 сторон, равные 3 (p-3).

<div class="mx-auto my-2 my-sm-3 my-lg-4 p-3">
    ...
</div>

Пример 4. Установим элементу на xs margin отступ снизу, равный 4. На остальных контрольных точках этот отступ уберём, т.е. установим его, равным 0.

<div class="mb-4 mb-sm-0">
    ...
</div>

Пример 5. Установим HTML-элементу:

• по умолчанию (min-width >= 0 или xs) padding отступы, равные 0 (p-0);
• на sm и следующих контрольных точках padding отступ слева, равный 3(pl-sm-3);
• на md и следующих контрольных точках (т.е. >md) margin уберём отступ слева (установим его равным 0, т.е. pl-md-0) и добавим отступ справа, равный 4 (pr-sm-4).

<div class="p-0 pl-sm-3 pl-md-0 pr-sm-4">
    ...
</div>