Принцип коробки у CSS: padding (частина ІІI)

maque.org.ua - Українською про CSS

У межах серії дописів про принцип коробки у CSS (Box Model) сьогодні говоритимемо про padding (відступ) у CSS. Якщо Ви не читали попередні дописи з цієї теми, на відповідні дописи можна перейти за цими посиланнями: Принцип коробки у CSS: margin (частина ІІ) і Принцип коробки у CSS: загальні відомості (част. І)

Padding – задає величину відступів вмісту (тексту) елемента від його обвідки.

maque.org.ua - Українською про CSS

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

Величину відступів також можна вказувати в пікселях (px), відсотках (%) та інших допустимих для CSS одиницях.

Аргумент auto також (як і у випадку з margin) вказує, що значення відступу повинне бути автоматично розраховано браузером.

Можна також задавати відступи окремо за допомогою таких властивостей:

  • padding-top – відступ вгорi
  • padding-right – відступ праворуч
  • padding-bottom – відступ знизу
  • padding-left – відступ ліворуч

Значення для відступів вказуються за годинниковою стрілкою, починаючи з padding-top:

maque.org.ua - Українською про CSS

Як і у випадку з margin, можна використовувати одне, два, три або чотири значення:

1 значення – відступ встановлюється однаково для усіх країв елемента:

padding: 10px;

2 значення – перший аргумент (10px) встановлює відступ від верхнього та нижнього країв, другий (20px) – для правого та лівого країв:

padding: 10px 20px;

3 значення – перший аргумент (10px) задає відступ від верхнього краю, другий (20px) – одночасно для правого та лівого краю, третій (30px) – для нижнього краю:

padding: 10px 20px 30px;

4 значення – встановлюються відступи відповідно від верхнього, правого, нижнього і лівого країв:

padding: 10px 20px 30px 50px;

blog-nero.net – новий україномовний та прогресивний блоґ про інтернет, блогосферу, соціальні мережі, монетизацію та все, що пов’язано з Всевтіньою Павутиною.

You may also like