Ghost-wrangling

My Flow utility class was applying margins around invisible elements like <style> and <script> tags, throwing off the vertical rhythm around them. Here's what I did to fix it, and why I also swapped em for lh while I was in there. This article uses some custom styles that may or may not work in your feed reader, so I recommend checking out the web version instead: https://chrisburnell.com/article/ghost-wrangling/ If you’re not already familiar with the Flow utility class in CSS, I recommend reading through Flow CSS Utility on Piccalilli. In short, the Flow utility class is used to provide consistent and dynamic vertical spacing between adjacent children of a given element. Here’s what that CSS looks like: .flow > * + * { margin-block-start: var(--flow-space, 1em); } Since I learned about this idea, I’ve been using it everywhere, and I’ve made a few modifications since then. The CSS side of things is a real set it and forget it situation (just the best, man), but because the selector…