CSS курс
Маржин конфликтите са парадоксите на CSS технологията, когато интуитивно изглежда, че трябва да бъде така, но в действителност се оказва различно.
Конфликт 1. Сблъсък на два блокови елемента по полета.
Ако горният елемент има долно поле от 30px (margin-bottom:30px;), а вторият долен елемент има горно поле от 20px (margin-top:20px;), тогава бихте очаквали да са на 50px един от друг, тъй като 30+20=50.
Вътре в жълтия div поставяме вътрешния div и горното му поле е 60px (margin-top:60px;)
Конфликт 2. Усвояване на маржове от вътрешни и външни елементи.
Нека има някакъв жълт div и горното му поле е равно на 50px (margin-top:50px;) Полетата не се сумират, но се взема най-голямата стойност от дадените две.
Отново ще използваме допълнението към FireFox - "Уеб разработчик" (Web Developer, Web Developer). Натиснете бутоните Miscellaneous - Display Ruler и вече можете да измервате разстояния на екрана.
Освен това, чрез щракване върху бутоните Очертание - Очертаване на елементи на ниво блок (Контури - Очертание на елементи на ниво блок) изберете блокови елементи за максимално удобство.
Що се отнася до нашите парадокси, вторият се третира чрез добавяне на граници към елементите. А това, между другото, само създава допълнително объркване. Представете си, че дизайнерът е използвал бордюри при подготовката на проекта и всичко е наред. И тогава в последния момент, преди предаването на проекта, тези граници бяха премахнати. Тук целият дизайн се разпадна.
По принцип и двата конфликта се разрешават чрез използване на подложки вместо полета.
Сега нека разгледаме с практически пример: css_020_001.html ← щракнете, за да видите как изглежда примерът на този сайт. css_020_001.zip ← изтеглете примера,за инсталиране на вашия сайт.
Щракнали сте върху обяснителна снимка, която показва как работи тази или онази функционалност. Няма нужда да кликвате върху тези снимки, няма смисъл.