Margin and padding

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes.

Notation

Spacing utilities that apply to all breakpoints, from xs to lg and bonus feature is xxl also

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for xs, sm, md, lg, and bonus xxl.

Where property is one of:

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

Where sides is one of:

• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
• e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom
• blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

• 0 - for classes that eliminate the margin or padding by setting it to 0
• 1 - (by default) for classes that set the margin or padding to 1px
• 2 - (by default) for classes that set the margin or padding to 2px
• 3 - (by default) for classes that set the margin or padding to 3px
• 4 - (by default) for classes that set the margin or padding to 4px
• 5 - (by default) for classes that set the margin or padding to 5px
• 6 - (by default) for classes that set the margin or padding to 6px
• 7 - (by default) for classes that set the margin or padding to 7px
• 8 - (by default) for classes that set the margin or padding to 8px
• 9 - (by default) for classes that set the margin or padding to 9px
• 10 - (by default) for classes that set the margin or padding to 10px
• 15 - (by default) for classes that set the margin or padding to 15px
• 20 - (by default) for classes that set the margin or padding to 20px
• 25 - (by default) for classes that set the margin or padding to 25px
• 50 - (by default) for classes that set the margin or padding to 50px
• auto - for classes that set the margin to auto

Examples

Here are some representative examples of these classes:

    .mt-0 {
        margin-top: 0px;
    }

    .ml-0, .ms-0 {
        margin-left: 0px;
    }

    .mb-0 {
        margin-bottom: 0px;
    }

    .mr-0, .me-0 {
        margin-right: 0px;
    }

    .mx-0 {
        margin-inline: 0px;
    }

    .my-0 {
        margin-block: 0px;
    }

    .m-auto {
        margin: auto;
    }

                                
                            

Horizontal centering

Additionally, osl-css-framework also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

Verticallly centering

Additionally, osl-css-framework also includes an .my-auto class for Verticallly centering fixed-height block level content

This utilities for Position relative / absolute / fixed / sticky etc

set position using class:

• position-relative or relative for position: relative
• position-absolute or absolute for position: absolute
• position-absolute-autoor absolute-autoor position-absolute-middleor absolute-middle for position: middle on relative content
• position-fixed or fixed for position: fixed
• position-static or static for position: static
• position-sticky or sticky for position: sticky
• position-inherit for position: inherit
• position-unset for position: unset

Where sides is one of:

• t or top - for classes that set top
• b or bottom - for classes that set bottom
• s/l or start/left - for classes that set left
• e/r or end/right - for classes that set right - for classes that set right

  ----- new

• inset-0 for classes that set top + right + bottom + left 0px
• inset-x-0 or inset-block-0 - for classes that set both *-left and *-right 0
• inset-y-0 or inset-inline-0 - for classes that set both *-top and *-bottom 0

Where size is one of:

• 0 - for classes that eliminate the above/below by setting it to 0px
• 1 - (by default) for classes that set the 1px
• 2 - (by default) for classes that set the 2px
• 3 - (by default) for classes that set the 3px
• 4 - (by default) for classes that set the 4px
• 5 - (by default) for classes that set the 5px
• 6 - (by default) for classes that set the 6px
• 7 - (by default) for classes that set the 7px
• 8 - (by default) for classes that set the 8px
• 9 - (by default) for classes that set the 9px
• 10 - (by default) for classes that set the 10px
• 15 - (by default) for classes that set the 15px
• 20 - (by default) for classes that set the 20px
• 25 - (by default) for classes that set the 25px
• 50 - (by default) for classes that set the 50px
• auto - for classes that set the auto

This utilities for font-weight and font-style

set font weight using class:

This utilities for set background / text color

set text and background both using class:

• text-bg-primary
• text-bg-secondary
• text-bg-success
• text-bg-danger
• text-bg-warning / text-bg-warn
• text-bg-info
• text-bg-light
• text-bg-dark

set background color using class:

• bg-light / bg-white
• bg-primary
• bg-secondary
• bg-disabled
• bg-success
• bg-danger
• bg-warning / bg-warn
• bg-info

• bg-dark text-light
• bg-transparent border

set text color using class:

• text-primary
• text-secondary
• text-success
• text-danger
• text-warning
• text-info
• bg-dark text-light
• text-dark

This utilities for show and hide

• hide / hidden for classes that set the display: none;
• show for classes that set the display: block;
• invisible for classes that set the visibility: hidden;
• affix for classes that set the position: fixed; with z-index: 1029;

The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box.

top: ⭐ middle: ⭐ bottom: ⭐ super: ⭐ sub: ⭐ text-top: ⭐ text-bottom: ⭐