Headers at the top of the columns seemingly not aligned

As reported on this reddit thread, there is some issue with headers being slightly offset at the top of columns, when by all appearances they should be aligned perfectly. In the screenshot I have added an absolutely positioned blue line to make that clear. It was reported with the h3 header, and I’ve looked at h3 and h4.

Here is a link to a copy of the original test brew showing the issue.

Note, original user had a “vertical spacing” div included, presumably to break the column rather than using a normal column break…if a column break was used (double set of triple ticks ```) this alignment issue would be fixed.

But an alternative fix is to change the h3 styling (and other headers)…currently, it features a top and bottom margin of .2em. If the top-margin was changed to top-padding, the issue would be fixed. For some reason, that top margin isn’t registered at the top of a column.

[G-Ambatte]

I’ve been experimenting a little, it seems that the removal of margin-top is the key. Switching to padding-top preserves the current spacing for any existing brews.

[Gazook89]

Looks like this is fixed, as long as display:inline-block holds up in terms of the other issue (min-width) we’ve discussed in Gitter.

Closing this.