Originally posted on my personal site, georgerodier.com.
Recently I've been looking into Tailwind CSS and how to work with the utility class CSS framework. I think it's a great fit for working with React components and hope to write about it soon. In doing research and learning more, I've been watching Adam Wathan's excellent screencasts for designing with Tailwind CSS. In one of the screencasts, as an aside, Adam talked about why he prefers to use top margins to bottom margins when spacing elements with CSS.
I've never given too much thought in the past when spacing an element. Element A needs to be spaced 10px above Element B, so I'd give Element A a bottom margin of 10px. OR maybe Element C needs to be 20px below Element D, so I'd give Element C a top margin of 20px. This is a haphazard approach that I don't recommend to anyone.
If you have ever worked on styling a page, you have probably at one point or another run into issues where the page does not look as expected and discovered that collapsing margins were to blame. When a top margin and a bottom margin come into contact with each other, they will end up overlapping producing a single margin. As a result, many developers and frameworks end up applying a margin in one direction (either top or bottom) to avoid the potential of margins collapsing.
While discussing designing a card with Tailwind CSS, Adam suggested that he uses top margins. The reason was intuitive and made sense to me:
When you add a top margin to the element making that element move feels better to me than when you add a bottom margin to an element and that actually pushes away other content. I like the idea that the element I'm adding a class to actually changes. - Adam Wathan
I like the fact that the style feels like it controls the element that it's applied to versus modifying the positions of the other elements on the page. That logic resonates with me and is enough to convince me to follow a similar approach. But since I had never heard about preferring top to bottom before, I was curious if anyone else had any opinions on the matter, and in doing so, I discovered yet another reason to prefer top margins.
In the blog post CSS: margin top vs bottom by Matthew James Taylor, he argued that because CSS cascades only in a forward direction, only the next elements in succession can be considered in context.
Matthew James Taylor demonstrated this by first showing lists of elements with top and bottom margins applied. Then he attempted to modify each list by inserting an element that required different styling. It's possible to target the next elements top from the inserted element by using the adjacent sibling combinator. You wouldn't be able to target a previous element's bottom because you can't target a proceeding element in CSS without adding additional logic elsewhere.
I'd read the article for a better explanation, but the conclusion is that modifying a top margin allows us to better override elements to a general purpose CSS principle:
If a style can be applied to one of many elements, always use the last possible element in the HTML source to allow overriding by context. - Matthew James Taylor
As a result of the arguments I've discovered, I think I'm a top margin convert and will be actively looking to use the top margin rather than the bottom margin when possible. I'm sure there are plenty of edge cases where a bottom margin may be needed, but this seems like a good starting point when needing to add vertical spacing.
Top comments (1)
In case that Matthew James Taylor mention about margin-bottom. You still can solve problem by adding :
.ad {
margin-bottom: 1em;
margin-top: -1em;
}
I love margin bottom cause which means there is no unnecessary space before the first element.
For the last element, * + * margin top works & looks cool BUT add *:not(:last-child) margin-bottom is more readable.
Sorry for my bad English