{"id":376435,"date":"2023-01-18T05:44:00","date_gmt":"2023-01-18T13:44:00","guid":{"rendered":"https:\/\/css-tricks.com\/?p=376435"},"modified":"2023-01-18T12:59:22","modified_gmt":"2023-01-18T20:59:22","slug":"solved-with-has-vertical-spacing-in-long-form-text","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/solved-with-has-vertical-spacing-in-long-form-text\/","title":{"rendered":"Solved With :has(): Vertical Spacing in Long-Form Text"},"content":{"rendered":"\n

If you\u2019ve ever worked on sites with lots of long-form text<\/a> \u2014 especially CMS sites where people can enter screeds of text in a WYSIWYG editor \u2014 you\u2019ve likely had to write CSS to manage the vertical spacing between different typographic elements, like headings, paragraphs, lists and so on.<\/p>\n\n\n\n

It\u2019s surprisingly tricky to get this right. And it’s one reason why things like the Tailwind Typography plugin and Stack Overflow\u2019s Prose exist \u2014 although these handle much more than just vertical spacing.<\/p>\n\n\n\n\n\n\n\n

Firefox supports :has()<\/code> behind the layout.css.has-selector.enabled<\/code> flag<\/a> in about:config<\/code> at the time of writing.<\/p>\n\n\n

What makes typographic vertical spacing complicated?<\/h3>\n\n\n

Surely it should just be as simple as saying that each element \u2014 p<\/code>, h2<\/code>, ul<\/code>, etc. \u2014 has some amount of top and\/or bottom margin… right? Sadly, this isn\u2019t the case. Consider this desired behavior:<\/p>\n\n\n\n