Spacing

Notation#

Using the spacing classes in Rocket CSS is easy. Our spacing classes are similar to other frameworks such as Twitter Bootstrap. Spacing classes follow this format: .{property}-{sides}-{size}

There is one exception to the above format. This is with the auto spacing. For this, use the following format: .{property}{sides}-{size}

Take a look at spacing notation below:

Property#

• m - for classes that set margin.
• p - for classes that set padding.

Sides#

• t - for classes that set top.
• r - for classes that set right.
• b - for classes that set bottom.
• l - for classes that set left.
• y - for classes that set top and bottom.
• x - for classes that set left and right.

Sizes#

• 0 - for classes that remove margin or padding.
• 1 - for classes that set to $default-spacing
• 2 - for classes that set $default-spacing + 1
• 3 - for classes that set $default-spacing + 2
• 4 - for classes that set $default-spacing + 3
• 5 - for classes that set $default-spacing + 4
• auto - for classes that set auto (see spacing notation above on using auto)

Auto Spacing#

As discussed above, you can use auto instead of a value if required. To so so, use this format: .{property}{sides}-{size}