Відступи та поля

Оновлено: 20.01.2023

Відступи та поля

Зміна відступів усередині або навколо елементів.

• margin

  margin

  Встановлює величину відступу від кожного краю елемента. Відступом є простір від межі поточного елемента до внутрішньої межі його батьківського елемента (рис. 1).

• margin-bottom

  margin-bottom

  Встановлює величину відступу від нижнього краю елемента. Відступом є відстань від зовнішнього краю нижньої межі поточного елемента до внутрішньої межі його батьківського елемента (рис. 1).

• margin-left

  margin-left

  Встановлює величину відступу від лівого краю елемента. Відступом є відстань від зовнішнього краю лівої межі поточного елемента до внутрішньої межі його батьківського елемента (рис. 1).

• margin-right

  margin-right

  Встановлює величину відступу від правого краю елемента. Відступом є відстань від зовнішнього краю правого краю поточного елемента до внутрішнього краю його батьківського елемента (рис. 1).

• margin-top

  margin-top

  Встановлює величину відступу від верхнього краю елемента. Відступом є відстань від зовнішнього краю верхньої межі поточного елемента до внутрішньої межі його батьківського елемента (рис. 1).

• padding

  padding

  Встановлює значення полів навколо вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст (рис. 1).

• padding-block

  padding-block

  Універсальна властивість, яка одночасно задає початковий і кінцевий внутрішні відступи елемента по блоковій осі. Напрямок осі залежить від значення властивості writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) блокова вісь буде вертикальною і padding-block встановлює відступи зверху та знизу. Для вертикального напряму письма (writing-mode: vertical-lr і writing-mode: vertical-rl) блокова вісь буде горизонтальною і padding-block встановлює відступи зліва та справа.

• padding-block-end

  padding-block-end

  Визначає кінцевий внутрішній відступ елемента по блоковій осі. Залежно від значення властивості writing-mode, властивість padding-block-end може відповідати властивості padding-bottom, padding-right, padding-left. У табл. 1 показано положення padding-block-end у поєднанні з іншими властивостями.

• padding-block-start

  padding-block-start

  Визначає початковий внутрішній відступ елемента по блоковій осі. Залежно від значення властивості writing-mode, властивість padding-block-start може відповідати властивості padding-top, padding-right, padding-left. У табл. 1 показано положення padding-block-start у поєднанні з іншими властивостями.

• padding-bottom

  padding-bottom

  Встановлює значення поля від нижнього краю вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст (рис. 1).

• padding-inline

  padding-inline

  Універсальна властивість, яка одночасно задає початковий і кінцевий внутрішні відступи елемента по рядковій осі. Напрямок осі залежить від значення властивості writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) строкова вісь буде горизонтальною і padding-inline встановлює відступи зліва та справа. Для вертикального напрямку письма (writing-mode: vertical-lr і writing-mode: vertical-rl) строкова вісь буде вертикальною, а padding-inline встановлює відступи зверху та знизу.

• padding-inline-end

  padding-inline-end

  Визначає початковий внутрішній відступ елемента по рядковій осі. Залежно від значення властивості writing-mode і direction, властивість padding-inline-end може відповідати властивості padding-top, padding-bottom, padding-right, padding-left. У табл. 1 показано положення padding-inline-end у поєднанні з іншими властивостями.

• padding-inline-start

  padding-inline-start

  Визначає початковий внутрішній відступ елемента по рядковій осі. Залежно від значення властивості writing-mode і direction, властивість padding-inline-start може відповідати властивості padding-top, padding-bottom, padding-right, padding-left. У табл. 1 показано положення padding-inline-start у поєднанні з іншими властивостями.

• padding-left

  padding-left

  Встановлює значення поля від лівого краю вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст (рис. 1).

• padding-right

  padding-right

  Встановлює значення поля від правого краю вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст (рис. 1).

• padding-top

  padding-top

  Встановлює значення поля від верхнього краю вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст (рис. 1).