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

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

Властивості, що формують блоковий елемент

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

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

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

Поля (padding)

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

Границі (border)

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

Відступи (margin)

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

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