Solving my margin headache
Throughout my attempted mastery of CSS, one of my most significant pain points has been dealing with margin between text elements. In this post, I will go over some of my previous approaches and the one approach I eventually landed on.
Bottom margin only
First, I tried limiting myself to only using
See the Pen Example #1 - Bottom margin only by Taylor Bryant (@taylorbryant) on CodePen.
While this doesn’t look awful, it introduces a couple of issues:
- The last paragraph in a section has an additional bottom margin.
- If you’re like me and prefer more space between the last paragraph of a section and the next heading, you’re out of luck.
:first-child & :last-child selectors
Second, I tried modifying my code to account for any edge cases using
See the Pen Example #2 - :first-child & :last-child selectors by Taylor Bryant (@taylorbryant) on CodePen.
This solves the issues introduced with the last approach. However, I can’t help but get code smells, because:
margin-topis declared twice on heading elements
margin-bottomis declared twice on the paragraph element
:not(:first-child) & :not(:last-child) selectors
By combining the
:not selector with
:last-child, I was able to get rid of the excess code and land on my best approach yet.
See the Pen Example #3 - :not(:first-child) & :not(:last-child) by Taylor Bryant (@taylorbryant) on CodePen.
If you ever find yourself writing more CSS just to undo previous rules, it’s probably worth giving
:not a shot. After my margin epiphany, I see myself applying this same concept to other aspects of my CSS every day.