Spacing allows to set the outer (margin) and inner (padding) space of an element. The difference between margin and padding can have a huge impact on the layout despite being invisible to the user.
Aircss spacing scale is based on the powers of two and provides eight steps.
It is possible to set the inner and outer spacing by choosing between .p* and .m* classes. However the following examples will only use outer spacing to illustrate the features of this module.
The following example shows the eight steps of the scale in the case of an horizontal margin.
n.b.: The example of the 7th and 8th steps of the scale cannot be displayed efficiently on a small screen. We are sorry for the inconvenience.
The choices of priority in aircss allow to define the space for multiple edges at the same time and to override this rule with a more specific rule. As a matter of fact, a rule for all four edges can be overriden by a rule for vertical or horizontal edge and those latters overriden by an edge specific rule (top, right, bottom and left).
<div class="mh5 ml8">...</div>