Last active
July 13, 2024 10:11
-
-
Save aytacmalkoc/f0583c0fbec9e031a0e41f62566e5e4d to your computer and use it in GitHub Desktop.
CSS margin classes
This file contains hidden or 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
| /* Top */ | |
| .mt-10 { | |
| margin-top: 10px; | |
| } | |
| .mt-20 { | |
| margin-top: 20px; | |
| } | |
| .mt-30 { | |
| margin-top: 30px; | |
| } | |
| .mt-40 { | |
| margin-top: 40px; | |
| } | |
| .mt-50 { | |
| margin-top: 50px; | |
| } | |
| .mt-60 { | |
| margin-top: 60px; | |
| } | |
| .mt-70 { | |
| margin-top: 70px; | |
| } | |
| .mt-80 { | |
| margin-top: 80px; | |
| } | |
| .mt-90 { | |
| margin-top: 90px; | |
| } | |
| .mt-100 { | |
| margin-top: 100px; | |
| } | |
| .mt-110 { | |
| margin-top: 110px; | |
| } | |
| .mt-120 { | |
| margin-top: 120px; | |
| } | |
| .mt-130 { | |
| margin-top: 130px; | |
| } | |
| .mt-140 { | |
| margin-top: 140px; | |
| } | |
| .mt-150 { | |
| margin-top: 150px; | |
| } | |
| .mt-160 { | |
| margin-top: 160px; | |
| } | |
| .mt-170 { | |
| margin-top: 170px; | |
| } | |
| .mt-180 { | |
| margin-top: 180px; | |
| } | |
| .mt-190 { | |
| margin-top: 190px; | |
| } | |
| .mt-200 { | |
| margin-top: 200px; | |
| } | |
| /* Bottom */ | |
| .mb-10 { | |
| margin-bottom: 10px; | |
| } | |
| .mb-20 { | |
| margin-bottom: 20px; | |
| } | |
| .mb-30 { | |
| margin-bottom: 30px; | |
| } | |
| .mb-40 { | |
| margin-bottom: 40px; | |
| } | |
| .mb-50 { | |
| margin-bottom: 50px; | |
| } | |
| .mb-60 { | |
| margin-bottom: 60px; | |
| } | |
| .mb-70 { | |
| margin-bottom: 70px; | |
| } | |
| .mb-80 { | |
| margin-bottom: 80px; | |
| } | |
| .mb-90 { | |
| margin-bottom: 90px; | |
| } | |
| .mb-100 { | |
| margin-bottom: 100px; | |
| } | |
| .mb-110 { | |
| margin-bottom: 110px; | |
| } | |
| .mb-120 { | |
| margin-bottom: 120px; | |
| } | |
| .mb-130 { | |
| margin-bottom: 130px; | |
| } | |
| .mb-140 { | |
| margin-bottom: 140px; | |
| } | |
| .mb-150 { | |
| margin-bottom: 150px; | |
| } | |
| .mb-160 { | |
| margin-bottom: 160px; | |
| } | |
| .mb-170 { | |
| margin-bottom: 170px; | |
| } | |
| .mb-180 { | |
| margin-bottom: 180px; | |
| } | |
| .mb-190 { | |
| margin-bottom: 190px; | |
| } | |
| .mb-200 { | |
| margin-bottom: 200px; | |
| } | |
| /* Top & Bottom */ | |
| .my-10 { | |
| margin-top: 10px; | |
| margin-bottom: 10px; | |
| } | |
| .my-20 { | |
| margin-top: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .my-30 { | |
| margin-top: 30px; | |
| margin-bottom: 30px; | |
| } | |
| .my-40 { | |
| margin-top: 40px; | |
| margin-bottom: 40px; | |
| } | |
| .my-50 { | |
| margin-top: 50px; | |
| margin-bottom: 50px; | |
| } | |
| .my-60 { | |
| margin-top: 60px; | |
| margin-bottom: 60px; | |
| } | |
| .my-70 { | |
| margin-top: 70px; | |
| margin-bottom: 70px; | |
| } | |
| .my-80 { | |
| margin-top: 80px; | |
| margin-bottom: 80px; | |
| } | |
| .my-90 { | |
| margin-top: 90px; | |
| margin-bottom: 90px; | |
| } | |
| .my-100 { | |
| margin-top: 100px; | |
| margin-bottom: 100px; | |
| } | |
| .my-110 { | |
| margin-top: 110px; | |
| margin-bottom: 110px; | |
| } | |
| .my-120 { | |
| margin-top: 120px; | |
| margin-bottom: 120px; | |
| } | |
| .my-130 { | |
| margin-top: 130px; | |
| margin-bottom: 130px; | |
| } | |
| .my-140 { | |
| margin-top: 140px; | |
| margin-bottom: 140px; | |
| } | |
| .my-150 { | |
| margin-top: 150px; | |
| margin-bottom: 150px; | |
| } | |
| .my-160 { | |
| margin-top: 160px; | |
| margin-bottom: 160px; | |
| } | |
| .my-170 { | |
| margin-top: 170px; | |
| margin-bottom: 170px; | |
| } | |
| .my-180 { | |
| margin-top: 180px; | |
| margin-bottom: 180px; | |
| } | |
| .my-190 { | |
| margin-top: 190px; | |
| margin-bottom: 190px; | |
| } | |
| .my-200 { | |
| margin-top: 200px; | |
| margin-bottom: 200px; | |
| } | |
| /* Paddings */ | |
| /* Top */ | |
| .pt-10 { | |
| padding-top: 10px; | |
| } | |
| .pt-20 { | |
| padding-top: 20px; | |
| } | |
| .pt-30 { | |
| padding-top: 30px; | |
| } | |
| .pt-40 { | |
| padding-top: 40px; | |
| } | |
| .pt-50 { | |
| padding-top: 50px; | |
| } | |
| .pt-60 { | |
| padding-top: 60px; | |
| } | |
| .pt-70 { | |
| padding-top: 70px; | |
| } | |
| .pt-80 { | |
| padding-top: 80px; | |
| } | |
| .pt-90 { | |
| padding-top: 90px; | |
| } | |
| .pt-100 { | |
| padding-top: 100px; | |
| } | |
| .pt-110 { | |
| padding-top: 110px; | |
| } | |
| .pt-120 { | |
| padding-top: 120px; | |
| } | |
| .pt-130 { | |
| padding-top: 130px; | |
| } | |
| .pt-140 { | |
| padding-top: 140px; | |
| } | |
| .pt-150 { | |
| padding-top: 150px; | |
| } | |
| .pt-160 { | |
| padding-top: 160px; | |
| } | |
| .pt-170 { | |
| padding-top: 170px; | |
| } | |
| .pt-180 { | |
| padding-top: 180px; | |
| } | |
| .pt-190 { | |
| padding-top: 190px; | |
| } | |
| .pt-200 { | |
| padding-top: 200px; | |
| } | |
| /* Bottom */ | |
| .pb-10 { | |
| padding-bottom: 10px; | |
| } | |
| .pb-20 { | |
| padding-bottom: 20px; | |
| } | |
| .pb-30 { | |
| padding-bottom: 30px; | |
| } | |
| .pb-40 { | |
| padding-bottom: 40px; | |
| } | |
| .pb-50 { | |
| padding-bottom: 50px; | |
| } | |
| .pb-60 { | |
| padding-bottom: 60px; | |
| } | |
| .pb-70 { | |
| padding-bottom: 70px; | |
| } | |
| .pb-80 { | |
| padding-bottom: 80px; | |
| } | |
| .pb-90 { | |
| padding-bottom: 90px; | |
| } | |
| .pb-100 { | |
| padding-bottom: 100px; | |
| } | |
| .pb-110 { | |
| padding-bottom: 110px; | |
| } | |
| .pb-120 { | |
| padding-bottom: 120px; | |
| } | |
| .pb-130 { | |
| padding-bottom: 130px; | |
| } | |
| .pb-140 { | |
| padding-bottom: 140px; | |
| } | |
| .pb-150 { | |
| padding-bottom: 150px; | |
| } | |
| .pb-160 { | |
| padding-bottom: 160px; | |
| } | |
| .pb-170 { | |
| padding-bottom: 170px; | |
| } | |
| .pb-180 { | |
| padding-bottom: 180px; | |
| } | |
| .pb-190 { | |
| padding-bottom: 190px; | |
| } | |
| .pb-200 { | |
| padding-bottom: 200px; | |
| } | |
| /* Top & Bottom */ | |
| .py-10 { | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| } | |
| .py-20 { | |
| padding-top: 20px; | |
| padding-bottom: 20px; | |
| } | |
| .py-30 { | |
| padding-top: 30px; | |
| padding-bottom: 30px; | |
| } | |
| .py-40 { | |
| padding-top: 40px; | |
| padding-bottom: 40px; | |
| } | |
| .py-50 { | |
| padding-top: 50px; | |
| padding-bottom: 50px; | |
| } | |
| .py-60 { | |
| padding-top: 60px; | |
| padding-bottom: 60px; | |
| } | |
| .py-70 { | |
| padding-top: 70px; | |
| padding-bottom: 70px; | |
| } | |
| .py-80 { | |
| padding-top: 80px; | |
| padding-bottom: 80px; | |
| } | |
| .py-90 { | |
| padding-top: 90px; | |
| padding-bottom: 90px; | |
| } | |
| .py-100 { | |
| padding-top: 100px; | |
| padding-bottom: 100px; | |
| } | |
| .py-110 { | |
| padding-top: 110px; | |
| padding-bottom: 110px; | |
| } | |
| .py-120 { | |
| padding-top: 120px; | |
| padding-bottom: 120px; | |
| } | |
| .py-130 { | |
| padding-top: 130px; | |
| padding-bottom: 130px; | |
| } | |
| .py-140 { | |
| padding-top: 140px; | |
| padding-bottom: 140px; | |
| } | |
| .py-150 { | |
| padding-top: 150px; | |
| padding-bottom: 150px; | |
| } | |
| .py-160 { | |
| padding-top: 160px; | |
| padding-bottom: 160px; | |
| } | |
| .py-170 { | |
| padding-top: 170px; | |
| padding-bottom: 170px; | |
| } | |
| .py-180 { | |
| padding-top: 180px; | |
| padding-bottom: 180px; | |
| } | |
| .py-190 { | |
| padding-top: 190px; | |
| padding-bottom: 190px; | |
| } | |
| .py-200 { | |
| padding-top: 200px; | |
| padding-bottom: 200px; | |
| } | |
| /* Start (left) */ | |
| .ps-10 { | |
| padding-left: 10px; | |
| } | |
| .ps-20 { | |
| padding-left: 20px; | |
| } | |
| .ps-30 { | |
| padding-left: 30px; | |
| } | |
| .ps-40 { | |
| padding-left: 40px; | |
| } | |
| .ps-50 { | |
| padding-left: 50px; | |
| } | |
| .ps-60 { | |
| padding-left: 60px; | |
| } | |
| .ps-70 { | |
| padding-left: 70px; | |
| } | |
| .ps-80 { | |
| padding-left: 80px; | |
| } | |
| .ps-90 { | |
| padding-left: 90px; | |
| } | |
| .ps-100 { | |
| padding-left: 100px; | |
| } | |
| .ps-110 { | |
| padding-left: 110px; | |
| } | |
| .ps-120 { | |
| padding-left: 120px; | |
| } | |
| .ps-130 { | |
| padding-left: 130px; | |
| } | |
| .ps-140 { | |
| padding-left: 140px; | |
| } | |
| .ps-150 { | |
| padding-left: 150px; | |
| } | |
| .ps-160 { | |
| padding-left: 160px; | |
| } | |
| .ps-170 { | |
| padding-left: 170px; | |
| } | |
| .ps-180 { | |
| padding-left: 180px; | |
| } | |
| .ps-190 { | |
| padding-left: 190px; | |
| } | |
| .ps-200 { | |
| padding-left: 200px; | |
| } | |
| /* End (right) */ | |
| .pe-10 { | |
| padding-right: 10px; | |
| } | |
| .pe-20 { | |
| padding-right: 20px; | |
| } | |
| .pe-30 { | |
| padding-right: 30px; | |
| } | |
| .pe-40 { | |
| padding-right: 40px; | |
| } | |
| .pe-50 { | |
| padding-right: 50px; | |
| } | |
| .pe-60 { | |
| padding-right: 60px; | |
| } | |
| .pe-70 { | |
| padding-right: 70px; | |
| } | |
| .pe-80 { | |
| padding-right: 80px; | |
| } | |
| .pe-90 { | |
| padding-right: 90px; | |
| } | |
| .pe-100 { | |
| padding-right: 100px; | |
| } | |
| .pe-110 { | |
| padding-right: 110px; | |
| } | |
| .pe-120 { | |
| padding-right: 120px; | |
| } | |
| .pe-130 { | |
| padding-right: 130px; | |
| } | |
| .pe-140 { | |
| padding-right: 140px; | |
| } | |
| .pe-150 { | |
| padding-right: 150px; | |
| } | |
| .pe-160 { | |
| padding-right: 160px; | |
| } | |
| .pe-170 { | |
| padding-right: 170px; | |
| } | |
| .pe-180 { | |
| padding-right: 180px; | |
| } | |
| .pe-190 { | |
| padding-right: 190px; | |
| } | |
| .pe-200 { | |
| padding-right: 200px; | |
| } | |
| /* Start (left) margin */ | |
| .ms-10 { | |
| margin-left: 10px; | |
| } | |
| .ms-20 { | |
| margin-left: 20px; | |
| } | |
| .ms-30 { | |
| margin-left: 30px; | |
| } | |
| .ms-40 { | |
| margin-left: 40px; | |
| } | |
| .ms-50 { | |
| margin-left: 50px; | |
| } | |
| .ms-60 { | |
| margin-left: 60px; | |
| } | |
| .ms-70 { | |
| margin-left: 70px; | |
| } | |
| .ms-80 { | |
| margin-left: 80px; | |
| } | |
| .ms-90 { | |
| margin-left: 90px; | |
| } | |
| .ms-100 { | |
| margin-left: 100px; | |
| } | |
| .ms-110 { | |
| margin-left: 110px; | |
| } | |
| .ms-120 { | |
| margin-left: 120px; | |
| } | |
| .ms-130 { | |
| margin-left: 130px; | |
| } | |
| .ms-140 { | |
| margin-left: 140px; | |
| } | |
| .ms-150 { | |
| margin-left: 150px; | |
| } | |
| .ms-160 { | |
| margin-left: 160px; | |
| } | |
| .ms-170 { | |
| margin-left: 170px; | |
| } | |
| .ms-180 { | |
| margin-left: 180px; | |
| } | |
| .ms-190 { | |
| margin-left: 190px; | |
| } | |
| .ms-200 { | |
| margin-left: 200px; | |
| } | |
| /* End (right) margin */ | |
| .me-10 { | |
| margin-right: 10px; | |
| } | |
| .me-20 { | |
| margin-right: 20px; | |
| } | |
| .me-30 { | |
| margin-right: 30px; | |
| } | |
| .me-40 { | |
| margin-right: 40px; | |
| } | |
| .me-50 { | |
| margin-right: 50px; | |
| } | |
| .me-60 { | |
| margin-right: 60px; | |
| } | |
| .me-70 { | |
| margin-right: 70px; | |
| } | |
| .me-80 { | |
| margin-right: 80px; | |
| } | |
| .me-90 { | |
| margin-right: 90px; | |
| } | |
| .me-100 { | |
| margin-right: 100px; | |
| } | |
| .me-110 { | |
| margin-right: 110px; | |
| } | |
| .me-120 { | |
| margin-right: 120px; | |
| } | |
| .me-130 { | |
| margin-right: 130px; | |
| } | |
| .me-140 { | |
| margin-right: 140px; | |
| } | |
| .me-150 { | |
| margin-right: 150px; | |
| } | |
| .me-160 { | |
| margin-right: 160px; | |
| } | |
| .me-170 { | |
| margin-right: 170px; | |
| } | |
| .me-180 { | |
| margin-right: 180px; | |
| } | |
| .me-190 { | |
| margin-right: 190px; | |
| } | |
| .me-200 { | |
| margin-right: 200px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment