0

Есть вот такой код

<main class="py-4">

</main>

Не понимаю назначение класса py-3, Если это паддинг топ то почему не используется класс pt-3 ?

В чем разница между py-3 и pt-3 ?

Если разница только в Bootstrap версии, тогда совместим ли с Bootstrap 4 класс py-3 ?

1

1 ответ 1

3

Читайте документацию bootstrap 4

В записи py-4:

  • первая буква p - задает css свойство padding - внутренний отступ
  • вторая буква y - добавляет к отступу -top и -bottom, тем самым указывая положение сверху и снизу
  • 4 - задает значение отступа в $spacer * 1.5, т.е. просто число.

Итого:

py-4 main { padding-top: 1.5rem; padding-bottom: 1.5rem; }


В чем разница?! :

Внутренний отступ padding (в bootstrap4 это класс p...), как и внешний отступ margin (в bootstrap4 это класс m...), можно задавать для 4-х положений: -top, -right, -bottom, -left.

В bootstrap 4 все эти положения задаются первой буквой положения (в дополнение к 'p ...'):

pt-4 - padding-top: 1.5rem; pr-4 - padding-right: 1.5rem; pb-4 - padding-bottom: 1.5rem; pl-4 - padding-left: 1.5rem;


Есть еще запись: px-4. В данном случае x - задает два отступа для левой стороны и правой.

Т.е. px-4 main { padding-left: 1.5rem; padding-right: 1.5rem; }


P.S:

Может быть так еще будет понятней:

  • py-3 это одновременно pt-3 и pb-3,
  • px-3 это одновременно pl-3 и pr-3.

Все аналогично и для внешнего отступа - margin.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.