4

I'm trying to add padding to the .container without it effecting the grid. The best example I can think of is I don't want the content to hit the sides of the .container because if the design has say a blue background and the .container is white I want there to be a padding on the left and right. I quick made an example page here to show the problem.

I'm basically trying to make a container of 1000px with gutters of 20px and each will then take up 65px. Outside of the grid though but inside the .container I want the padding left and right to also be 20px. Not sure if this helps or makes things worse but this is my Calca workout sheet for the grids

Sulcalibur
  • 71
  • 7

2 Answers2

4

Neat has a mixin called pad which applies padding to the current element.

Where you've declared your outer-container just add a pad mixin and specify the left and right values, e.g.:

#container {
  @include outer-container;
  @include pad(default 50px default 50px);
}

In the above example the parameters are in the order top, right, bottom, left. Handily, the mixin accepts default so you don't need to know the existing values for the top and bottom if you don't care about them.

That said, if your use case is to prevent the background from hitting the side (rather than the content) then padding won't help you, and you'll need to fix margins instead.

spikeheap
  • 3,827
  • 1
  • 32
  • 47
2

Typically grid systems use box-sizing: border-box; to overcome issues with box model calculations concerning margins and padding.

Here's a good article by Paul Irish on this very issue: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Chris Coyier from CSS Tricks has a good article too: http://css-tricks.com/box-sizing/

Adam
  • 5,226
  • 4
  • 21
  • 18