Модель коробки CSS2 говорить нам, що сусідні вертикальні поля руйнуються .
Я вважаю це досить прикрим, оскільки є джерелом багатьох дизайнерських помилок. Я сподіваюся, розуміючи мету згортання полів, я зрозумію, коли їх використовувати і як їх уникнути, коли вони не потрібні.
Яка мета цієї функції?
Відповіді:
Загальне значення "поля" полягає не в тому, щоб перенести "перемістити це на 10 пікс.", А навпаки, "поряд з цим елементом повинно бути 10 пікс. Вільного місця".
Я завжди вважав, що це найпростіше зрозуміти за допомогою абзаців.
Якби ви просто давали абзаци margin-top: 10pxі не мали полів для будь-яких інших елементів, ряд абзаців був би розставлений красиво. Але, звичайно, у вас виникнуть проблеми, розмістивши під абзацом інший елемент. Ці двоє торкнулися б.
Якщо поля не згортаються, ви соромтеся додати margin-bottom: 10px до свого попереднього коду, оскільки тоді будь-яка пара абзаців буде віддалена на 20 пікселів, а абзаци будуть відокремлюватися від інших елементів лише на 10 пікс.
Тож вертикальні поля падають. Додаючи верхнє та нижнє поля розміром 10 пікселів, ви говорите: "Мені байдуже, які правила полів мають інші елементи. Я вимагаю щонайменше 10 пікселів відступів над і під кожним моїм абзацом."
margin-topдля цього елемента?