Padding in element makes it overflow the column border

[gioele]

If you use padding-left or padding-right in an element, it will not respect the column border and will use the some space of the gutter or the next column on the right.

I published a test case at https://gist.github.com/3360968.

The core of the problem is this:

html {
    @include container;
    @include susy-grid-background;
}

body {
    @include push(1);
    @include span-columns(1);

    // the padding will make the element go over the column border
    padding-left: 2em;
    padding-right: 2em;
}

The body element should span over a single column. It does that if you do not have any padding declaration. Once you use padding, it will overflow over the gutter.

[mirisuzanne]

Yep. That's how the box model works. Susy offers two ways around this, depending on your needs.

1) You can change the box model in all modern browsers with @include border-box-sizing;. See the border box sizing reference docs.

2) You can use the $padding argument in span-columns.

body {
  @include push(1);
  @include span-columns(1, $padding: 2em);
}

Of course, you also have the option of adding markup inside the grid element (body) and adding padding to that inner element. That would be the OOCSS approach, separating grid structure from element style.