Remove margin on compact grid

[jamesckemp]

Removed margin on grid items when using compact grid. However, it required me to use comments to remove whitespace between elements. Could be to do with my reset method? (Just using normalize).

[lukewhitehouse]

@jamesckemp hey James, been doing some digging on this and I don't think the margin's are the problem. I've just tested this on the Groot website project, using the following HTML:

<div class="container" style="outline: 1px solid red;">
    <div class="grid grid--compact">
        <div class="grid__item grid__item--4-12-bp3">
            <div class="demo-box">Hello world</div>
        </div>
        <div class="grid__item grid__item--4-12-bp3">
            <div class="demo-box">Hello world</div>
        </div>
        <div class="grid__item grid__item--4-12-bp3">
            <div class="demo-box">Hello world</div>
        </div>
        <div class="grid__item grid__item--4-12-bp3">
            <div class="demo-box">Hello world</div>
        </div>
    </div>
</div>

and I'm not seeing the problem you're seeing. The margins aren't effecting anything and the compact grid is showing no spacing issues as seen in this screenshot...

Anyway you can show me the full code you're working with (maybe privately?). Also, its worth mentioning that this website is using Normalize too.

[jamesckemp]

Changed the patch for the following reasons:

The spacing issue arose because my base type is 10px (rather than 16px). As such, the minus margin in ems was not accurate. Convert to a pixel value and there are no longer spacing issues.

Potential issue: If client uses HTML compression, the space in the HTML will be remove and the grid will show up incorrectly.