#статья дня

Схлопывание отступов… марджинов, маргинов, margin — да как пожелаете.

В мире flexbox и grid всю боль этой фразы понять непросто, хотя стоило бы. Возможно, перестали бы пихать флекс там, где достаточно блока… ну да ладно. Чего только стоит один мой недавний вопрос: https://yangx.top/htmlshit/531

Но Джош Камю просто взял и сделал прекрасную статью, на пальцах и картинках объясняющую схлопывания в разных ситуациях: https://www.joshwcomeau.com/css/rules-of-margin-collapse/

Как всегда, горячо рекомендую если не читать, то хотя бы по примерам потыкать. Лучше никто не делает пока :)

#css #margin #collapse #tutorial

#статья дня

Вообще, это скорее даже тянет на хештег #фишка.

Есть такой способ навигации по странице, как якоря. Расставляете ссылки формата <a href=“#news”>News</a> и, собственно, раздел: <section id=“news”>bla</section>.

И всё прекрасно и работает как задумано, вот только если у вас есть зафиксированная при скролле шапка, она закроет часть содержимого.

Как с этим боролись раньше? А довольно забавным образом.

Вместо всей секции ссылались на некий элемент: <a name=“news”></a>, который сдвигали отрицательным margin или position: relative на величину высоты шапки. Грубовато, но работало!

К счастью, теперь это не нужно! Пруф: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html

TL;DR: scroll-padding-top на :root или scroll-margin-top на целевой элемент.

Прям прекрасно. Очевидно, работает не только для якорей, но и для scroll-snap интерфейсов.

И уже можно использовать.

#css #scroll #margin #anchor