Go one step further with our solutions for creating an intuitive, personalized experience.
Manage the spacing of your interface components using the Spacing class.
To apply spaces around an element, use the m_[X] class (X being a value between 0 and 10).
<div class="spacing-block-documentation m_1"></div>
<div class="spacing-block-documentation m_3"></div>
It is possible to modify the spaces from one of the particular sides with m[S]:
- t for top.
- r for right.
- b for bottom.
- l for left.
- x for left and right.
- y for top and bottom.
<div class="spacing-block-documentation ml_1"></div>
<div class="spacing-block-documentation my_2"></div>
Use breakpoints to better control spacing behavior with m_[X]--[B]
<div class="spacing-block-documentation m_1--t"></div>
<div class="spacing-block-documentation ml_3--s my_2--t"></div>
You can apply internal spaces.
In all the classes concerning the external spaces, you will just have to replace the m by p.
<div class="spacing-block-documentation m_1"></div>
<div class="spacing-block-documentation m_3"></div>
<div class="spacing-block-documentation ml_1"></div>
<div class="spacing-block-documentation my_2"></div>
<div class="spacing-block-documentation m_1--t"></div>
<div class="spacing-block-documentation ml_3--s my_2--t"></div>
| Class | Definition |
|---|---|
| m_[X] | margin : [X]rem !important. |
| mt_[X] | margin-top : [X]rem !important. |
| mr_[X] | margin-right : [X]rem !important. |
| mb_[X] | margin-bottom : [X]rem !important. |
| ml_[X] | margin-left : [X]rem !important. |
| mx_[X] | margin-left : [X]rem !important; margin-right : [X]rem !important. |
| my_[X] | margin-top : [X]rem !important; margin-bottom : [X]rem !important. |
| m_[X]--[B] | margin : [X]rem !important; (at breakpoint [B]). |
| mt_[X]--[B] | margin-top : [X]rem !important; (at breakpoint [B]). |
| mr_[X]--[B] | margin-right : [X]rem !important; (at breakpoint [B]). |
| mb_[X]--[B] | margin-bottom : [X]rem !important; (at breakpoint [B]). |
| ml_[X]--[B] | margin-left : [X]rem !important; (at breakpoint [B]). |
| mx_[X]--[B] | margin-left : [X]rem !important; margin-right : [X]rem !important; (at breakpoint [B]). |
| my_[X]--[B] | margin-top : [X]rem !important; margin-bottom : [X]rem !important; (at breakpoint [B]). |
| p_[X] | padding : [X]rem !important. |
| pt_[X] | padding-top : [X]rem !important. |
| pr_[X] | padding-right : [X]rem !important. |
| pb_[X] | padding-bottom : [X]rem !important. |
| pl_[X] | padding-left : [X]rem !important. |
| px_[X] | padding-left : [X]rem !important; padding-right : [X]rem !important. |
| py_[X] | padding-top : [X]rem !important; padding-bottom : [X]rem !important. |
| p_[X]--[B] | padding : [X]rem !important; (at breakpoint [B]). |
| pt_[X]--[B] | padding-top : [X]rem !important; (at breakpoint [B]). |
| pr_[X]--[B] | padding-right : [X]rem !important; (at breakpoint [B]). |
| pb_[X]--[B] | padding-bottom : [X]rem !important; (at breakpoint [B]). |
| pl_[X]--[B] | padding-left : [X]rem !important; (at breakpoint [B]). |
| px_[X]--[B] | padding-left : [X]rem !important; padding-right : [X]rem !important; (at breakpoint [B]). |
| py_[X]--[B] | padding-top : [X]rem !important; padding-bottom : [X]rem !important; (at breakpoint [B]). |
Haltura wants to provide you with an efficient experience by implementing cookies! Cookies are small files that help us to understand you better and to ensure the proper functioning of our technologies. You have the right to manage them as you wish!
Cookie settings