Consider removing top margin from basic typography blocks.

[joemcgill]

While working on the hmn.md redesign, I'm finding the need to remove top margins from paragraphs within builder blocks. A strategy I've found helpful in order to address these types of issues is to adopt single-direction margin declarations. The idea is best explained in this CSS Wizardry article, but here are a few benefits (excerpted from the article).

• Easier to define vertical rhythm in one fell swoop.
• More confidence in (re)moving components if you know their margins all push in the same direction.
• Components and elements don’t have to necessarily live in a certain order if their margins aren’t dependent on adjoining sides.
• Not being concerned with collapsing margins means one less thing to worry about.

@sambulance, @mattheu – what would you think about adopting this for our base typography styles?

[sambulance]

I'd be happy to go with that. I think @mattheu wrote the typography styles initially so I'd double check the rationale for multiple margins.

I'd also consider the * + * selector for margins, although it does have it's downfalls. https://alistapart.com/article/axiomatic-css-and-lobotomized-owls

[joemcgill]

Thanks for sharing that lobotomized owl article, @sambulance. I had missed that approach. It's counterintuitive to how I've historically thought about margins and selectors, but is definitely worthy of consideration.

[mattheu]

I think I somewhat agree. I've read that CSS wizardry article before and agree a lot, and have often followed this logic in the past.

On the whole it doesn't make too much difference as adjacent margins collapse. But not when nested and it can be an issue with the first item in a container.

On the HM redesign and ended up writing a lot of code like this:

.div-with-padding > *:first-child { margin-top: 0; }
.div-with-padding > *:last-child { margin-bottom: 0; }

One thing about having no top margin is headings. If you have a large block of text like a blog post, with headings to break it up, you may want more margin on the top than the preceding paragraph has margin bottom. I think the V1 design looked like this. However I notice that is no longer the case.

So I'm easy :)

[Frikki]

With all due respect to Harry Roberts (CSS Wizardry), in that particular article, he is advocating a poor approach. The reason is given in this article.