Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Схлопывание внешних отступов у элементов

Отличная статья с визуальными примерами о том как работает схлопывание внешних отступов у элементов – What’s the Deal with Margin Collapse?. Как-то так получилось, что не все фронтенд разработчики знают об этом поведении внешних отступов.

Когда схлопывание происходит

У двух соседних элементов.

margin-collapse-siblings-1024x490

У дочернего элемента.

margin-collapse-child-top-1024x455

margin-collapse-child-bottom-1024x455

В том случае, если высота элемента равна нулю, то схлопнуться верхний и нижний отступы.

margin-collapse-self-1024x299

Когда схлопывания не будет

margin-collapse-exception-1-1024x569

margin-collapse-exception-2-1024x525

margin-collapse-exception-3-1024x525

margin-collapse-exception-4-1024x526

margin-collapse-exception-5-1024x478

Поделиться:
comments powered by Disqus