Архіви позначок: padding-top

Деякі часто вживані властивості CSS: margin, padding

Поширте інформацію:

Випишу деякі властивості CSS, які часто використовуються, і призначення яких легко переплутати.

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

Якщо в елемента немає батька,  відступом буде відстань від краю елемента до краю вікна браузера. Однак, треба враховувати, що для самого вікна браузера (клієнтської області) за замовчуванням також встановлені відступи. Щоб позбавитися їх, необхдіно задати нульове значення margin для селектора <body>

Синтаксис

margin: значення|auto{1,4}

Можна використовувати одне, два, три або чотири значення. Ефект залежить від кількості значень:

  • 1 – відступи будуть встановлені для всіх країв елемента
  • 2 – перший аргумент встановлює відступи для верхнього та нижнього країв, другий – для лівого та правого країв
  • 3 – перший аргумент задає відступ для верхнього краю, другий – одночасно для лівого та правого краю, третій – для нижнього краю
  • 4 – встановлюються відступи відповідно для верхнього, правого, нижнього і лівого країв

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

Якщо ви забудете, в якому порядку вказуються значення відступів, і не матимете під рукою цієї, або іншої шпаргалки, можете задати відступи у розгорнутій формі, властивостями

margin-top, margin-right, margin-bottom, margin-left

Значення цих властивостей аналогічне, але вони задають відступ для тільки одного краю відповідно до їх назви.

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

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

Синтаксис

padding: значення|auto{1,4}

Можна використовувати одне, два, три або чотири значення. Ефект залежить від кількості значень:

  • 1 – береги задаються від  всіх країв елемента
  • 2 – перший аргумент встановлює береги від верхнього та нижнього країв, другий – для лівого та правого країв
  • 3 – перший аргумент задає берег від верхнього краю, другий – одночасно для лівого та правого краю, третій – для нижнього краю
  • 4 – встановлюються береги відповідно від верхнього, правого, нижнього і лівого країв

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

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

padding-top, padding-right, padding-bottom, padding-left.

Значення властивостей відповідає їх назві.


border – ця властивість не стосується відступів, а встановлює товщину, колір і стиль рамок навколо елемента, тому в цій публікації розглядатися не буде :)