undefined
undefined
Basic usage
Adding margin to a single side
If you want to add margin to a single side on an element you an use the mixins pl
pr
pt
and pb
. For example:
div {
@include ml(3);
}
Adding margin horizonatally or vertically
There are two options for adding simultaneous vertical / horizontal margin. You can either use the separate mixins px
and py
which will add the appropriate margin along the single dimension. Or you can use the pxy
mixin which will add margin both horizontally and vertically.
For example to add vertical-only margin:
div {
@include my(3);
// or
@include mxy(0, 3);
}
To add both horizontal and vertical margin we can do:
div {
@include mxy(2, 3);
// or
@include mx(2);
@include my(3);
}
Adding margin to all sides
To add equal margin to all sides of an element you can use the p
mixin. For example:
div {
@include m(4);
}
With the spacing
function
All margins are computed with the spacing
function in BridgeCSS. This function computes a spacing scale that is universally respsected by the Bridge style scheme. Therefore if you want to add margin you can use that function rahter than than mixins should you desire:
div {
margin-left: spacing(4);
margin-right: spacing(4);
}
The advantage to this approach is that the CSS reads more like vanilla CSS (eg. instead of hiding the selector behind the mixin). The downside is that in cases where you want to apply multiple styles (like p
, pxy
, px
or py
) you need to separate out multiple lines / calls to the spacing
function.
Our recommendation is to try both approaches and see what feels more natural to your coding style.