Курс CSS
Конфлікти полів - це парадокси технології CSS, коли інтуїтивно здається, що має бути так, а насправді виходить інакше.
Конфлікт 1. Зіткнення двох блокових елементів маржин.
Якщо верхній елемент має нижній маржин рівний 30px (margin-bottom:30px;), а другий нижній елемент має верхній маржин рівний 20px (margin-top:20px;), можна очікувати, що відстань між ними дорівнюватиме 50px, т.к . 30+20=50.
Усередині жовтого дива поміщаємо внутрішній див і верхній маржин у нього рівний 60px (margin-top:60px;)
Конфлікт 2. Поглинання маржин у внутрішніх та зовнішніх елементів.
Нехай є якийсь жовтий див і верхній маржин у нього рівний 50px (margin-top:50px;) Маржини не сумуються, а береться найбільше значення з цих двох.
Знову скористаємося доповненням до FireFox – "Web Developer" (Веб Девелопер, Веб Розробник). Натисніть кнопку Miscellaneous - Disply Ruler (Різне - Показати Лінійку) і тепер ви можете вимірювати відстані на екрані.
Крім того, можна натиснувши кнопки Outline – Outline Block Level Elements (Контури – Контур елементів рівня блоку) виділити блокові елементи для максимальної зручності.
Щодо наших парадоксів, то другий з них лікується додаванням бордерів до елементів. І це, до речі, лише створює додаткову плутанину. Уявіть, що дизайнер при підготовці до проекту використовував бордер і все було ок. А потім в останній момент перед здаванням проекту ці бордери прибрав. Тут весь дизайн і розсипався.
Кардинально обидва конфлікти вирішуються шляхом використання паддингів замість маржин.
Тепер досліджуємо на практичному прикладі: css_020_001.html ← натисніть, щоб подивитися, як виглядає приклад на даному сайті. css_020_001.zip ← скачайте приклад,щоб встановити свій сайт.
Ви клікнули пояснювальний малюнок, який показує, як працює той чи інший функціонал. Звати ці малюнки не треба, немає сенсу.