How to set padding on the container?

Tags: css,sass,susy-compass,susy,susy-sass

Problem :

I have a header full width and I want to set padding on it using the Susy math, instead of being rewriting every time the padding of the containers in my layout.

For example:


@import "susy";
@import "compass/reset";

$susy: (
    columns: 12,
    gutter-position: inside,
    global-box-sizing: border-box

#header {
  height: 80px;
  background: red;

#footer {
  height: 80px;
  background: blue;


<header id="header"></header>
<footer id="footer"></footer>

Both of them are full width, but there's no padding, of course. The thing is: How can I insert the same padding of the entire Susy default, like the span without the need of doing this manually with padding-left and padding-right on containers?

Solution :

Susy doesn't do anything with container padding. There is no Susy way to do it, but you can create your own mixin or placeholder class to handle it for you (even using susy along the way):

$container-padding: gutter(); // any size you want

@mixin container-padding($size: $container-padding)  {
  padding-left: $size;
  padding-right: $size;

    CSS Howto..

    Need to compress CSS and JavaScript via PHP but need to know performance implications and how to implement?

    How to center a single character both vertically and horizontally in a square div

    How to arrange div as a dock panel?

    How to align 3 divs with CSS retaining relative position while scaling window

    How to create a simple Modal Dialog Box in JQuery?

    How do I get my List Items to move up a Little in CSS

    How can I specify a *.css file in an ASP.NET UserControl?

    How to Make a Fluid Layout

    How to position two
  • 's within a nested
  • How to align text in CSS

    How to prevent content from being pushed down on appearance of floating menu in mobile display

    How Can i Make a column to fill all the way to the sides in bootstrap

    css/html how to make logo appear after heading

    How to blur the div below the section with CSS 3 without background image?

    how to use linked animated css?

    How to place the same image at the top and at the bottom of the same column?

    PrimeFaces 3.0 - How do I override the default opacity of a dialog overlay?

    How can I reduce the space between two elements in CSS?

    How to attach CSS to my template?

    How to show an arrow down symbol with CSS

    How to make only background image transparent in responsive square grid?

    How to make more divs appear when hovering over one div?

    how can i center the footer text in the bottom of the page regardless of screen size

    How can I increase the size of twitter bootstrap carousel navigation arrows

    How do I style the Nivo Slider thumbnails?

    How to change CSS with jQuery change and this

    How do I eloquently toggle a show/hide event in a list of multiple collapsible items with jQuery?

    How to make text responsive to div size?

    How can CSS interfere with JavaScript?

    How to align a Wordpress navigation bar to the right of a logo?