Ich habe es schon so oft benötigt, dass ich Margins bzw. Paddings für einzelne Elemente selbst definieren möchte. Wenn man SaSS einsetzt kann man dazu bspw. folgendes Mixing standardmäßig verwenden:
$currentOffset: 0;
$maxOffset: 20;
@while $currentOffset <= $maxOffset {
.m-top-#{$currentOffset} {
margin-top: $currentOffset*0.25 + 'em;'
}
.m-bot-#{$currentOffset} {
margin-bottom: $currentOffset*0.25 + 'em;'
}
.p-top-#{$currentOffset} {
padding-top: $currentOffset*0.25 + 'em;'
}
.p-bot-#{$currentOffset} {
padding-bottom: $currentOffset*0.25 + 'em;'
}
$currentOffset: $currentOffset + 0.25;
}
So kann man dann jedem Element bspw. die Klasse m-top-1 (margin-top: 0.25em), etc. oder m-top-20 (margin-top: 5em) bzw. p-top-1 (padding-top: 0.25em), etc. oder p-top-20 (padding-top: 5em) geben.