Scalable/Modular CSS: how to handle vertical margins between modules?

Question

I've searched extensively, and can't seem to find a consistent way that people handle the top/bottom margins between modules in a... modular way. I like the idea of just using a generic wrapper div with the css as .page-area { margin-bottom: 1em }, but in the real world, designers aren't that consistent, and you end up with multiple variations on that container. I've used this sass code on a few projects, and it worked alright, but I didn't necessarily love it (credit to Nicole Sullivan):

*p,m = padding,margin
*a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical
*s,m,l,n = small($space-half),medium($space),large($space-double),none(0)

*/

$space : 1em;
$space-half : $space/2;
$space-double : $space*2;

 .ptn, .pvn, .pan { padding-top:     0; }
 .pts, .pvs, .pas { padding-top:     $space-half; }
 .ptm, .pvm, .pam { padding-top:     $space; }
 .ptl, .pvl, .pal { padding-top:     $space-double; }
 .prn, .phn, .pan { padding-right:   0; }
 .prs, .phs, .pas { padding-right:   $space-half; }
 .prm, .phm, .pam { padding-right:   $space; }
 .prl, .phl, .pal { padding-right:   $space-double; }
 .pbn, .pvn, .pan { padding-bottom:  0; }
 .pbs, .pvs, .pas { padding-bottom:  $space-half; }
 .pbm, .pvm, .pam { padding-bottom:  $space; }
 .pbl, .pvl, .pal { padding-bottom:  $space-double; }
 .pln, .phn, .pan { padding-left:    0; }
 .pls, .phs, .pas { padding-left:    $space-half; }
 .plm, .phm, .pam { padding-left:    $space; }
 .pll, .phl, .pal { padding-left:    $space-double; }
 .mtn, .mvn, .man { margin-top:      0; }
 .mts, .mvs, .mas { margin-top:      $space-half; }
 .mtm, .mvm, .mam { margin-top:      $space; }
 .mtl, .mvl, .mal { margin-top:      $space-double; }
 .mrn, .mhn, .man { margin-right:    0; }
 .mrs, .mhs, .mas { margin-right:    $space-half; }
 .mrm, .mhm, .mam { margin-right:    $space; }
 .mrl, .mhl, .mal { margin-right:    $space-double; }
 .mbn, .mvn, .man { margin-bottom:   0; }
 .mbs, .mvs, .mas { margin-bottom:   $space-half; }
 .mbm, .mvm, .mam { margin-bottom:   $space; }
 .mbl, .mvl, .mal { margin-bottom:   $space-double; }
 .mln, .mhn, .man { margin-left:     0; }
 .mls, .mhs, .mas { margin-left:     $space-half; }
 .mlm, .mhm, .mam { margin-left:     $space; }
 .mll, .mhl, .mal { margin-left:     $space-double; }

I realize that questions like this can potentially start discussions, but that's not my intent - I'm just wondering if there is a single common best practice for consistent vertical margin/padding of modules and page sections? SMACSS doesn't seem to touch on it.

Answer 1

I don't know if this will be helpful for you, but this is usually what I do.

I set a vertical rhythm variable based on my defaults, and then make a placeholder class for vertical rhythm, which I extend on elements that need it.

$base-font-size: 20px !default
$base-line-height: 1.3
$base-vertical-rhythm: ceil($base-font-size * $base-line-height)

%base-vertical-rhythm
    margin-bottom: em($base-vertical-rhythm)

blockquote,
dl,
ol,
p,
ul
    @extend %base-vertical-rhythm

Compass also has some presets for vertical rhythm.