Created
August 5, 2016 19:39
-
-
Save theblanchard/a7e039fb091bd2c1805473d19df12c3f to your computer and use it in GitHub Desktop.
Often used CSS margin and padding styles
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Custom margin & padding styles */ | |
| .mr0 { | |
| margin-right: 0 !important | |
| } | |
| .ml0 { | |
| margin-left: 0 !important | |
| } | |
| .p0 { | |
| padding: 0px | |
| } | |
| .pt0 { | |
| padding-top: 0px | |
| } | |
| .pb0 { | |
| padding-bottom: 0px | |
| } | |
| .m0 { | |
| margin: 0px | |
| } | |
| .mt0 { | |
| margin-top: 0px | |
| } | |
| .mb0 { | |
| margin-bottom: 0px | |
| } | |
| .ml0 { | |
| margin-left: 0px | |
| } | |
| .mr0 { | |
| margin-right: 0px | |
| } | |
| .pl0 { | |
| padding-left: 0px | |
| } | |
| .pr0 { | |
| padding-right: 0px | |
| } | |
| .p1 { | |
| padding: 6px | |
| } | |
| .pt1 { | |
| padding-top: 6px | |
| } | |
| .pb1 { | |
| padding-bottom: 6px | |
| } | |
| .m1 { | |
| margin: 6px | |
| } | |
| .mt1 { | |
| margin-top: 6px | |
| } | |
| .mb1 { | |
| margin-bottom: 6px | |
| } | |
| .ml1 { | |
| margin-left: 6px | |
| } | |
| .mr1 { | |
| margin-right: 6px | |
| } | |
| .pl1 { | |
| padding-left: 6px | |
| } | |
| .pr1 { | |
| padding-right: 6px | |
| } | |
| .p2 { | |
| padding: 12px | |
| } | |
| .pt2 { | |
| padding-top: 12px | |
| } | |
| .pb2 { | |
| padding-bottom: 12px | |
| } | |
| .m2 { | |
| margin: 12px | |
| } | |
| .mt2 { | |
| margin-top: 12px | |
| } | |
| .mb2 { | |
| margin-bottom: 12px | |
| } | |
| .ml2 { | |
| margin-left: 12px | |
| } | |
| .mr2 { | |
| margin-right: 12px | |
| } | |
| .pl2 { | |
| padding-left: 12px | |
| } | |
| .pr2 { | |
| padding-right: 12px | |
| } | |
| .p3 { | |
| padding: 18px | |
| } | |
| .pt3 { | |
| padding-top: 18px | |
| } | |
| .pb3 { | |
| padding-bottom: 18px | |
| } | |
| .m3 { | |
| margin: 18px | |
| } | |
| .mt3 { | |
| margin-top: 18px | |
| } | |
| .mb3 { | |
| margin-bottom: 18px | |
| } | |
| .ml3 { | |
| margin-left: 18px | |
| } | |
| .mr3 { | |
| margin-right: 18px | |
| } | |
| .pl3 { | |
| padding-left: 18px | |
| } | |
| .pr3 { | |
| padding-right: 18px | |
| } | |
| .p4 { | |
| padding: 24px | |
| } | |
| .pt4 { | |
| padding-top: 24px | |
| } | |
| .pb4 { | |
| padding-bottom: 24px | |
| } | |
| .m4 { | |
| margin: 24px | |
| } | |
| .mt4 { | |
| margin-top: 24px | |
| } | |
| .mb4 { | |
| margin-bottom: 24px | |
| } | |
| .ml4 { | |
| margin-left: 24px | |
| } | |
| .mr4 { | |
| margin-right: 24px | |
| } | |
| .pl4 { | |
| padding-left: 24px | |
| } | |
| .pr4 { | |
| padding-right: 24px | |
| } | |
| @media (min-width: 992px) { | |
| .p0 { | |
| padding: 0px | |
| } | |
| .pt0 { | |
| padding-top: 0px | |
| } | |
| .pb0 { | |
| padding-bottom: 0px | |
| } | |
| .m0 { | |
| margin: 0px | |
| } | |
| .mt0 { | |
| margin-top: 0px | |
| } | |
| .mb0 { | |
| margin-bottom: 0px | |
| } | |
| .ml0 { | |
| margin-left: 0px | |
| } | |
| .mr0 { | |
| margin-right: 0px | |
| } | |
| .pl0 { | |
| padding-left: 0px | |
| } | |
| .pr0 { | |
| padding-right: 0px | |
| } | |
| .p1 { | |
| padding: 8px | |
| } | |
| .pt1 { | |
| padding-top: 8px | |
| } | |
| .pb1 { | |
| padding-bottom: 8px | |
| } | |
| .m1 { | |
| margin: 8px | |
| } | |
| .mt1 { | |
| margin-top: 8px | |
| } | |
| .mb1 { | |
| margin-bottom: 8px | |
| } | |
| .ml1 { | |
| margin-left: 8px | |
| } | |
| .mr1 { | |
| margin-right: 8px | |
| } | |
| .pl1 { | |
| padding-left: 8px | |
| } | |
| .pr1 { | |
| padding-right: 8px | |
| } | |
| .p2 { | |
| padding: 16px | |
| } | |
| .pt2 { | |
| padding-top: 16px | |
| } | |
| .pb2 { | |
| padding-bottom: 16px | |
| } | |
| .m2 { | |
| margin: 16px | |
| } | |
| .mt2 { | |
| margin-top: 16px | |
| } | |
| .mb2 { | |
| margin-bottom: 16px | |
| } | |
| .ml2 { | |
| margin-left: 16px | |
| } | |
| .mr2 { | |
| margin-right: 16px | |
| } | |
| .pl2 { | |
| padding-left: 16px | |
| } | |
| .pr2 { | |
| padding-right: 16px | |
| } | |
| .p3 { | |
| padding: 24px | |
| } | |
| .pt3 { | |
| padding-top: 24px | |
| } | |
| .pb3 { | |
| padding-bottom: 24px | |
| } | |
| .m3 { | |
| margin: 24px | |
| } | |
| .mt3 { | |
| margin-top: 24px | |
| } | |
| .mb3 { | |
| margin-bottom: 24px | |
| } | |
| .ml3 { | |
| margin-left: 24px | |
| } | |
| .mr3 { | |
| margin-right: 24px | |
| } | |
| .pl3 { | |
| padding-left: 24px | |
| } | |
| .pr3 { | |
| padding-right: 24px | |
| } | |
| .p4 { | |
| padding: 32px | |
| } | |
| .pt4 { | |
| padding-top: 32px | |
| } | |
| .pb4 { | |
| padding-bottom: 32px | |
| } | |
| .m4 { | |
| margin: 32px | |
| } | |
| .mt4 { | |
| margin-top: 32px | |
| } | |
| .mb4 { | |
| margin-bottom: 32px | |
| } | |
| .ml4 { | |
| margin-left: 32px | |
| } | |
| .mr4 { | |
| margin-right: 32px | |
| } | |
| .pl4 { | |
| padding-left: 32px | |
| } | |
| .pr4 { | |
| padding-right: 32px | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| .p0 { | |
| padding: 0px | |
| } | |
| .pt0 { | |
| padding-top: 0px | |
| } | |
| .pb0 { | |
| padding-bottom: 0px | |
| } | |
| .m0 { | |
| margin: 0px | |
| } | |
| .mt0 { | |
| margin-top: 0px | |
| } | |
| .mb0 { | |
| margin-bottom: 0px | |
| } | |
| .ml0 { | |
| margin-left: 0px | |
| } | |
| .mr0 { | |
| margin-right: 0px | |
| } | |
| .pl0 { | |
| padding-left: 0px | |
| } | |
| .pr0 { | |
| padding-right: 0px | |
| } | |
| .p1 { | |
| padding: 10px | |
| } | |
| .pt1 { | |
| padding-top: 10px | |
| } | |
| .pb1 { | |
| padding-bottom: 10px | |
| } | |
| .m1 { | |
| margin: 10px | |
| } | |
| .mt1 { | |
| margin-top: 10px | |
| } | |
| .mb1 { | |
| margin-bottom: 10px | |
| } | |
| .ml1 { | |
| margin-left: 10px | |
| } | |
| .mr1 { | |
| margin-right: 10px | |
| } | |
| .pl1 { | |
| padding-left: 10px | |
| } | |
| .pr1 { | |
| padding-right: 10px | |
| } | |
| .p2 { | |
| padding: 20px | |
| } | |
| .pt2 { | |
| padding-top: 20px | |
| } | |
| .pb2 { | |
| padding-bottom: 20px | |
| } | |
| .m2 { | |
| margin: 20px | |
| } | |
| .mt2 { | |
| margin-top: 20px | |
| } | |
| .mb2 { | |
| margin-bottom: 20px | |
| } | |
| .ml2 { | |
| margin-left: 20px | |
| } | |
| .mr2 { | |
| margin-right: 20px | |
| } | |
| .pl2 { | |
| padding-left: 20px | |
| } | |
| .pr2 { | |
| padding-right: 20px | |
| } | |
| .p3 { | |
| padding: 30px | |
| } | |
| .pt3 { | |
| padding-top: 30px | |
| } | |
| .pb3 { | |
| padding-bottom: 30px | |
| } | |
| .m3 { | |
| margin: 30px | |
| } | |
| .mt3 { | |
| margin-top: 30px | |
| } | |
| .mb3 { | |
| margin-bottom: 30px | |
| } | |
| .ml3 { | |
| margin-left: 30px | |
| } | |
| .mr3 { | |
| margin-right: 30px | |
| } | |
| .pl3 { | |
| padding-left: 30px | |
| } | |
| .pr3 { | |
| padding-right: 30px | |
| } | |
| .p4 { | |
| padding: 40px | |
| } | |
| .pt4 { | |
| padding-top: 40px | |
| } | |
| .pb4 { | |
| padding-bottom: 40px | |
| } | |
| .m4 { | |
| margin: 40px | |
| } | |
| .mt4 { | |
| margin-top: 40px | |
| } | |
| .mb4 { | |
| margin-bottom: 40px | |
| } | |
| .ml4 { | |
| margin-left: 40px | |
| } | |
| .mr4 { | |
| margin-right: 40px | |
| } | |
| .pl4 { | |
| padding-left: 40px | |
| } | |
| .pr4 { | |
| padding-right: 40px | |
| } | |
| } | |
| .pt1-lg { | |
| padding-top: 15px | |
| } | |
| .pb1-lg { | |
| padding-bottom: 15px | |
| } | |
| .mt1-lg { | |
| margin-top: 15px | |
| } | |
| .mb1-lg { | |
| margin-bottom: 15px | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment