Архіви категорій: CSS

Що таке em у значеннях CSS-властивостей? А що таке pt?

Залишити відповідь
Поширте інформацію:

Для вказання розмірів елементів в CSS використовуються абсолютні і відносні одиниці вимірювання. Абсолютні одиниці не залежать від пристрою виведення, а відносні визначають розмір елемента відносно іншого розміру. Читати далі

CSS-властивість position

Залишити відповідь
Поширте інформацію:

Властивість position встановлює спосіб позиціювання елемента відносно вікна браузера або інших об’єктів веб-сторінки. Може приймати значення: Читати далі

Деякі часто вживані властивості 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 – ця властивість не стосується відступів, а встановлює товщину, колір і стиль рамок навколо елемента, тому в цій публікації розглядатися не буде :)