⚙️ Что такое свойство letter-spacing в CSS и зачем оно используется?

Свойство letter-spacing управляет расстоянием между символами текста.

Можно уменьшать или увеличивать интервал для улучшения читаемости и стилизации.

➡️ Пример:

<div class="box">HELLO WORLD</div>

<style>
  .box {
    font-size: 20px;
    letter-spacing: 5px;
  }
</style>

🗣 В этом примере текст "HELLO WORLD" будет отображён с увеличенным интервалом между буквами.

Популярные значения:

• normal — стандартное расстояние (по умолчанию)
• положительные числа — увеличивают интервалы
• отрицательные числа — уменьшают интервалы

Полезно для заголовков, логотипов и стилизованного текста в интерфейсах.

CodeBase | Frontend | #CSS

⚙️ Что такое свойство line-height в CSS и зачем оно используется?

Свойство line-height управляет высотой строки текста, то есть расстоянием между базовыми линиями соседних строк.

Оно напрямую влияет на читаемость и визуальный баланс текста

➡️ Пример:

<div class="text">
  Это пример текста<br>
  с увеличенным межстрочным интервалом.
</div>

<style>
  .text {
    width: 250px;
    line-height: 1.8;
    font-size: 16px;
  }
</style>

🗣 В этом примере line-height: 1.8 делает текст более “воздушным” и удобным для чтения.

Популярные значения:

• normal — стандартное поведение (обычно 1.2)
• число — множитель от размера шрифта (рекомендуется)
• px, em, % — фиксированная высота

line-height — основа типографики в вебе. Грамотный выбор значения делает интерфейс аккуратным и читабельным.

CodeBase | Frontend | #CSS

⚙️ Что такое свойство box-sizing в CSS и зачем оно используется?

Свойство box-sizing определяет, включаются ли отступы и границы в общие размеры элемента.

Это влияет на то, как рассчитываются ширина и высота блока

➡️ Пример:

<div class="box">Пример</div>

<style>
  .box {
    width: 200px;
    padding: 20px;
    border: 5px solid #333;
    box-sizing: border-box;
  }
</style>

🗣 В этом примере элемент всегда занимает ровно 200px, включая отступы и границу. Без box-sizing: border-box; он стал бы шире — 250px.

Популярные значения:

• content-box — стандартное поведение (отступы прибавляются к размеру)
• border-box — всё входит в указанную ширину/высоту

CodeBase | Frontend | #CSS

⚙️ Что такое свойство opacity в CSS и зачем оно используется?

opacity — это CSS-свойство, которое задаёт степень прозрачности элемента. Значение opacity может быть от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Это полезно для создания визуальных эффектов, таких как затемнение или появление элементов.

➡️ Пример:

<div class="opaque-box">Прозрачный текст</div>

<style>
  .opaque-box {
    background-color: lightblue;
    opacity: 0.5; /* Устанавливаем 50% прозрачности */
    padding: 20px;
    text-align: center;
  }
</style>

🗣 В этом примере свойство opacity делает элемент .opaque-box полупрозрачным, что особенно полезно для наложений и визуального выделения интерфейсов.

CodeBase | Frontend | #CSS