Конфлікти полів (margin) у CSS

Математика CSS не працює. Наприклад, є заголовок (тег h1) і за ним слідує абзац (тег p). Обидва елементи блокові, з чого випливає, що їхня ширина дорівнює елементу-батьку і в потоці вони розташовані один під одним. Також уявімо, що заголовок має нижнє поле (margin-bottom) рівне 30px, а абзац - верхнє поле (margin-top) рівне 50px. Здавалося б, проміжок між заголовком і абзацом повинен дорівнювати сумі цих двох полів, тобто 80px, проте ні. Сусідні поля не складаються, браузер просто вибирає найбільше із двох значень, у нашому випадку 50px. Тому, якщо ви хочете зробити проміжок між двома елементами за участю двох елементів, використовуйте відступи (padding).

Або ось ситуація: в блоці div лежить абзац (тег p), у абзацу присутні верхнє та нижнє поля (margin-top та margin-bottom) рівні 50px. Здавалося б, під впливом цих полів блок div повинен розширитися, але ні. Поля виступають межі блоку div (рис. 1). Цей ефект називається конфліктом полів. Щоб уникнути виходу поля за межі блокового елемента, необхідно елементу-батькові (у нашому випадку тегу div) призначити верхній і нижній відступи (padding) рівні, наприклад, 1 px. Або кордон (border).

Або ви можете використовувати властивість overflow для елемента-батька зі значенням відмінним від visible : цим ви також запобігтиме виходу поля елемента-дитини за межі елемента-батька.