Spacing
Update your layout without creating new classes. Spacing helpers are useful for modifying the padding and margin of an element.
Playground
Use the playground to get a feel for what the different helper classes can do. For an explanation of how they work, see the How it works section below.
Como funciona
The helper classes apply margin or padding to an element ranging from 0 to 5. Each size increment was designed to align with common Material Design spacings. These classes can be applied using the following format {property}{direction}-{size}.
The property applies the type of spacing:
m- appliesmarginp- appliespadding
The direction designates the side the property applies to:
t- applies the spacing for*-topb- applies the spacing for*-bottoml- applies the spacing for*-leftr- applies the spacing for*-rightx- applies the spacing for both*-leftand*-righty- applies the spacing for both*-topand*-bottoma- applies the spacing for the property in all directions
The size controls the increment of the property:
auto- sets the spacing toauto0- removes the spacing by setting it to01- sets the spacing to$spacer * .252- sets the spacing to$spacer * .53- sets the spacing to$spacer4- sets the spacing to$spacer * 1.55- sets the spacing to$spacer * 3