Skip to content

Mitigating the negative margin bug

Compare
Choose a tag to compare
@Dan503 Dan503 released this 12 Jun 11:46
· 244 commits to master since this release

This release is all about trying to mitigate the common negative margin browser bug as much as possible. Gutter Grid now tries it's best to avoid combining a negative top margin with a top gutter height. Instead Gutter Grid just doesn't output a top outer gutter unless the user has explicitly asked for one. If there is no outer gutter then there is no need to cancel it out with a negative margin which means no margin bug.

The bug is still an issue for bottom outer gutters though. The bottom negative margin cannot be removed. To combat this I've added a new class to the class system. The grid__paddedWrapper class adds padding-bottom: 1px instead of overflow: hidden. It is designed to be a replacement for the grid__wrapper class when overflow is needed. If using the mixin system padding-bottom: 1px needs to be added yourself to an element wrapping around the grid.