Відмінності між версіями «Блокова модель, теги DIV, SPAN, відступи, рамки, позиціонування.»

Версія за 08:24, 25 листопада 2013 (переглянути вихідний код) KTarino (обговорення • внесок) (→‎Границь (border)) ← Попереднє редагування		Версія за 08:25, 25 листопада 2013 (переглянути вихідний код) KTarino (обговорення • внесок) (→‎Відступи(margin)) Наступне редагування →
Рядок 13:		Рядок 13:
	Границі це лінії навколо полів елемента на одній, двох, трьох або всіх чотирьох його сторонах. У кожній лінії є товщина, стиль і колір. Для створення рамки застосовується універсальна властивість border одночасно задає всі ці параметри, а для створення ліній на окремих сторонах елемента можна скористатися властивостями border-left, border-top, border-right і border-bottom, відповідно встановлюють кордон ліворуч, зверху, праворуч і знизу .		Границі це лінії навколо полів елемента на одній, двох, трьох або всіх чотирьох його сторонах. У кожній лінії є товщина, стиль і колір. Для створення рамки застосовується універсальна властивість border одночасно задає всі ці параметри, а для створення ліній на окремих сторонах елемента можна скористатися властивостями border-left, border-top, border-right і border-bottom, відповідно встановлюють кордон ліворуч, зверху, праворуч і знизу .
−	=== Відступи(margin) ===	+	=== Відступи (margin) ===
	Відступом будемо називати порожній простір від зовнішнього краю границі, полів або вмісту блоку. Як вже згадувалося, границі з полями не обов'язкові і можуть бути відсутні, так що спосіб формування відступів залежить від ситуації. Як і у випадку з полями, застосовують вираження «верхній відступ» або «відступ зверху» , і їм подібні для інших сторін. Позначення «відступи» слід розуміти як однакове значення відступів для всіх сторін.		Відступом будемо називати порожній простір від зовнішнього краю границі, полів або вмісту блоку. Як вже згадувалося, границі з полями не обов'язкові і можуть бути відсутні, так що спосіб формування відступів залежить від ситуації. Як і у випадку з полями, застосовують вираження «верхній відступ» або «відступ зверху» , і їм подібні для інших сторін. Позначення «відступи» слід розуміти як однакове значення відступів для всіх сторін.
	Для відступів характерні такі особливості:		Для відступів характерні такі особливості:

---

Версія за 08:25, 25 листопада 2013

Основи Блокової моделі

Будь-який блоковий елемент складається з набору властивостей, подібно капустяним листам накладених одна на одну. Основою блоку виступає його контент (це може бути текст, зображення та ін), ширина якого задається властивістю width, а висота через height; навколо контенту йдуть поля ( padding ), вони створюють порожній простір від контенту до внутрішнього краю границь; потім йдуть власне самі границі( border ) і завершують блок відступи ( margin ), невидимий порожній простір назовні границь. Порядок впливу цих властивостей на блок чітко визначений і не може бути порушений.

На практиці, жодна з цих властивостей не є обов'язковою, у тому числі і контент, тому Ви можете формувати будь-які блоки, що являють собою комбінації властивостей padding, border и margin, або взагалі обійтись без них (будуть використані значення по-замовчуванню, встановлені в браузері)

Огляд властивостей

Поля (padding)

Полем називають відстань від внутрішнього краю границь або краю блоку до уявного прямокутника , що обмежує вміст блоку. Через те, що значення полів можуть змінюватися на кожній стороні, застосовують виразу «верхнє поле» або «поле зверху», і їм подібні для інших сторін. Позначення «поля» слід розуміти як однакове значення полів для всіх сторін. Основне призначення полів - створити порожній простір навколо вмісту блокового елемента, наприклад тексту, щоб він не прилягав щільно до краю елемента. Використання полів підвищує читабельність тексту і покращує зовнішній вигляд сторінки.

Границі (border)

Границі це лінії навколо полів елемента на одній, двох, трьох або всіх чотирьох його сторонах. У кожній лінії є товщина, стиль і колір. Для створення рамки застосовується універсальна властивість border одночасно задає всі ці параметри, а для створення ліній на окремих сторонах елемента можна скористатися властивостями border-left, border-top, border-right і border-bottom, відповідно встановлюють кордон ліворуч, зверху, праворуч і знизу .

Відступи (margin)

Відступом будемо називати порожній простір від зовнішнього краю границі, полів або вмісту блоку. Як вже згадувалося, границі з полями не обов'язкові і можуть бути відсутні, так що спосіб формування відступів залежить від ситуації. Як і у випадку з полями, застосовують вираження «верхній відступ» або «відступ зверху» , і їм подібні для інших сторін. Позначення «відступи» слід розуміти як однакове значення відступів для всіх сторін. Для відступів характерні такі особливості:

   Відступи прозорі, на них не поширюється колір фону або фонова картинка, визначена для блоку. Однак якщо фон встановлений у батьківського елемента, він буде помітний і на відступи.
   Відступи на відміну від полів можуть приймати від'ємне значення, це призводить до зсуву всього блоку у вказаний бік . Так, якщо задано margin-left: -10px, це зрушить блок на десять пікселів вліво.
   Для відступів характерне явище під назвою «схлопування», коли відступи у прилеглих елементів не підсумовуються, а об'єднуються між собою.
   Відступи, задані у відсотках, обчислюються від ширини контенту блоку. Це стосується як вертикальних, так і горизонтальних відступів.