Читайте документацию 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
.