Responsive Layout – Margins and Padding using %

[smedz28]

Hey guys,

I am a bit confused by a couple of things when it comes to margins and padding in responsive layouts –

1. Given that the design is supposed to be responsive e.g. responsive grid, images etc is it still considered common practice to set margins and padding in PX rather than %?
2. How do you calculate margins and padding in % if your design has no max-width set in PX on the body or container element?
3. Should every layout have a max-width set in order to use – target/context=%

For example – I am using a responsive grid layout, no PX value set on width and 4 columns at 25% width. I want to set a padding on each of the columns which is the equivalent of 10 or 20px. Are we still using the same formula but the context is the % value of the containing element such as – 10px/25(%)= 0.4%

[Paulie_D]

I want to set a padding on each of the columns which is the equivalent of 10 or 20px,

Your columns are 25% width. If you want gutters between them then you should be using margins..technically…and adjusting the widths accordingly.

If you want ‘faux-gutters’ then padding on the columns will do that and no width adjustments would be required assuming you are usingbox-sizing:border-box.

So it depends on which way you want to go.

If the former and you don’t wan’t to work out the width values then a SASS math can help _ a la_ : https://css-tricks.com/video-screencasts/132-quick-useful-case-sass-math-mixins/

[smedz28]

my grid system works with gutters already built in using margins and the column widths adjusted to compensate for this but If I apply a background color or image to the columns and have text inside each then unless a padding is set the text would run right from the edge of the column.

I currently set padding on these in PX. I just wondered if this was still considered good practice since the layout is supposed to be responsive, should I have been setting padding in % instead of PX.

As I said, even if I wanted to set padding in % I am unsure of how to calculate this given that my current project has no fixed or max-width. Does it even make any difference given that the grid is responsive?

I will certainly have a look at the link you have provided

[Senff]

I want to set a padding on each of the columns which is the equivalent of 10 or 20px.

If you want to have a padding of 10px, then why not just use an actual 10px value? I don’t see the point of using ems if you really want it to be 10 pixels.

[Paulie_D]

I currently set padding on these in PX. I just wondered if this was still considered good practice since the layout is supposed to be responsive, should I have been setting padding in % instead of PX.

Using % would make the padding automatically responsive but there is no reason you couldn’t use px and media queries as required.

[smedz28]

Thanks again guys. Don’t know if that was a pointless question to ask but it would have bothered me if I didn’t

[nixnerd]

If you want gutters between them then you should be using margins..technically…

That would be ideal, but it will sometimes break your layout because you can’t use box-sizing: border-box; to subtract the margin from the width of the column like you can with padding. But yes, margin is the more logical property. You can still use margin… with more complicated CSS. So, it would look something like this:

CSS:

.col{ 
    width: calc(33.333% - 20px); /* subtracts margin from column width */
    margin-left: 20px; /* or whatever */
}

SCSS:

$col-width: 33.333%;
$gutter: 20px; // or whatever

.col{
    width: $col-width - $gutter;
    padding-left: $gutter;
}

With padding do this:

*{ box-sizing: border-box; } /* requires prefixes */

.col{
    width: 33.333%;
    padding-left: 20px;
}

I like the global handling you get with padding better.

Back to your original question, I think it’s good to set gutters with more absolute units like px or em. I like to know I will ALWAYS have a reasonable space between things… no matter what the screen size is.

[Author]

Posts