Headings that follow a horizontal rule throw off the grid due to margin collapse

[chriscarrollsmith]

Normally a horizontal rule is followed by a 1.5-line bottom margin, which restores the grid alignment. But in the case where a horizontal rule is followed by a heading with a larger top margin that 1.5 lines, margin collapse causes the round-number heading margin to be used instead of the 1.5-line bottom margin of the horizontal rule, which throws off the grid by half a line.

The following new style should fix it:

/* Fix margin collapse when headings follow horizontal rules */
hr + h1, hr + h2, hr + h3, hr + h4, hr + h5, hr + h6 {
  margin-top: calc(var(--line-height) * 0.5);
}

[chriscarrollsmith]

Actually, the above fix doesn't work in every case, because the heading element might be child of another element like <article>.

I am having better luck with this:

hr {
  position: relative;
  display: block;
  height: var(--line-height);
  margin: var(--line-height) 0;
  padding: calc(var(--line-height) * 0.5) 0;
  border: none;
  color: var(--text-color);
}

By taking the extra half-line of margin around the horizontal rule and making it padding instead of margin, we effectively proof it against margin collapse.