Типографіка

До будь-якого блоку можна буде додати клас який зробить внутрішній відступ у блоку або зовнішній відступ. За це відповідають стилі padding і margin відповідно.

Класи будуть називатися наступним чином:

• Для внутрішніх відступів:
  • p-0, p-1, p-2, p-3, p-4 – додають до всих чотирьох сторін елементу відповідно по 0, 0.5, 1, 2 і 4rem. 1rem = 16px, наприклад р-1 додасть відступи в 8px, р-2 – 16px, p-3 – 32px, p-4 -64px.
  • px-0, px-1, px-2, px-3, px-4 – додають відступи зліва і справа.
  • py-0, py-1, py-2, py-3, py-4 – додають відступи знизу і згори.
  • pt-0, pt-1, pt-2, pt-3, pt-4 – додають відступи згори.
  • pb-0, pb-1, pb-2, pb-3, pb-4 – додають відступи знизу.
  • pl-0, pl-1, pl-2, pl-3, pl-4 – додають відступи зліва.
  • pr-0, pr-1, pr-2, pr-3, pr-4 – додають відступи справа.
• Для зовнішніх відступів:
  • все абсолютно аналогічно, тільки замість букви “p” буква “m”, тобто m-1, mx-3, my-2 і т.д.

Але варто пам’ятати, що у елементів: параграф і список існують свої зовнішні відступи. Вони дорівнюють 16px, тобто еквівалентні mb-1, тому додаючи додаткові внутрішні відступи (p-…, p-y-… або pb-…) загалний відступ між елементами збільшиться.

Нижче будуть приклади додавання відступів до параграфів. Якщо слід прибрати відступ у параграфа або списка за замовченням, то слід додати клас mb-0. Як в цьому витадку.

Додавання зовнішнього адо внутрішнього відступу знизу 1, тобто mb-1 або pb-1.

Додавання зовнішнього адо внутрішнього відступу знизу 2, тобто mb-2 або pb-2.

Додавання зовнішнього адо внутрішнього відступу знизу 3, тобто mb-3 або pb-3.

Додавання зовнішнього адо внутрішнього відступу знизу 4, тобто mb-4 або pb-4.

У випадку якщо треба розтянути текст по всій ширині блоку, треба додати до блоке (елементу) клас justify. Для прикладу я продублюю цей текст кілька раз: увипадку якщо треба розтянути текст по всій ширині блоку, треба додати до блоке (елементу) клас justify; випадку якщо треба розтянути текст по всій ширині блоку, треба додати до блоке (елементу) клас justify.

Приклад нумерованого списку:

1. Елемент
2. Елемент
3. Елемент
   • Елемент
   • Елемент