Margin utilities

Use the following classes to modify the margin property of any element.

Margin

.m-0 { margin: 0px;
}
.m-5 { margin: 5px;
}
.m-10 { margin: 10px;
}
.m-15 { margin: 15px;
}
.m-20 { margin: 20px;
}
.m-25 { margin: 25px;
}
.m-30 { margin: 30px;
}
.m-35 { margin: 35px;
}
.m-40 { margin: 40px;
}
.m-45 { margin: 45px;
}
.m-50 { margin: 50px;
}

Examples

.m-0

Hello world!

.m-10

Hello world!

.m-25

Hello world!

.m-50

Hello world!

Margin left

.m-l-0 { margin-left: 0px;
}
.m-l-5 { margin-left: 5px;
}
.m-l-10 { margin-left: 10px;
}
.m-l-15 { margin-left: 15px;
}
.m-l-20 { margin-left: 20px;
}
.m-l-25 { margin-left: 25px;
}
.m-l-30 { margin-left: 30px;
}
.m-l-35 { margin-left: 35px;
}
.m-l-40 { margin-left: 40px;
}
.m-l-45 { margin-left: 45px;
}
.m-l-50 { margin-left: 50px;
}

Examples

.m-l-0

Hello world!

.m-l-10

Hello world!

.m-l-25

Hello world!

.m-l-50

Hello world!

Margin right

.m-r-0 { margin-right: 0px;
}
.m-r-5 { margin-right: 5px;
}
.m-r-10 { margin-right: 10px;
}
.m-r-15 { margin-right: 15px;
}
.m-r-20 { margin-right: 20px;
}
.m-r-25 { margin-right: 25px;
}
.m-r-30 { margin-right: 30px;
}
.m-r-35 { margin-right: 35px;
}
.m-r-40 { margin-right: 40px;
}
.m-r-45 { margin-right: 45px;
}
.m-r-50 { margin-right: 50px;
}

Examples

.m-r-0

Helloworld!

.m-r-10

Helloworld!

.m-r-25

Helloworld!

.m-r-50

Helloworld!

Margin top

.m-t-0 { margin-top: 0px;
}
.m-t-5 { margin-top: 5px;
}
.m-t-10 { margin-top: 10px;
}
.m-t-15 { margin-top: 15px;
}
.m-t-20 { margin-top: 20px;
}
.m-t-25 { margin-top: 25px;
}
.m-t-30 { margin-top: 30px;
}
.m-t-35 { margin-top: 35px;
}
.m-t-40 { margin-top: 40px;
}
.m-t-45 { margin-top: 45px;
}
.m-t-50 { margin-top: 50px;
}

Examples

.m-t-0

Hello world!

.m-t-10

Hello world!

.m-t-25

Hello world!

.m-t-50

Hello world!

Margin bottom

.m-b-0 { margin-bottom: 0px;
}
.m-b-5 { margin-bottom: 5px;
}
.m-b-10 { margin-bottom: 10px;
}
.m-b-15 { margin-bottom: 15px;
}
.m-b-20 { margin-bottom: 20px;
}
.m-b-25 { margin-bottom: 25px;
}
.m-b-30 { margin-bottom: 30px;
}
.m-b-35 { margin-bottom: 35px;
}
.m-b-40 { margin-bottom: 40px;
}
.m-b-45 { margin-bottom: 45px;
}
.m-b-50 { margin-bottom: 50px;
}

Examples

.m-b-0

Hello world!

.m-b-10

Hello world!

.m-b-25

Hello world!

.m-b-50

Hello world!