Skip to content

Instantly share code, notes, and snippets.

@aytacmalkoc

aytacmalkoc/spacing.css

Last active July 13, 2024 10:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aytacmalkoc/f0583c0fbec9e031a0e41f62566e5e4d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aytacmalkoc/f0583c0fbec9e031a0e41f62566e5e4d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. aytacmalkoc revised this gist Jul 13, 2024. 1 changed file with 327 additions and 0 deletions.
    327 changes: 327 additions & 0 deletions spacing.css
    View file
    Original file line number Diff line number Diff line change
    @@ -529,3 +529,330 @@
    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;
    }
  2. aytacmalkoc revised this gist Jul 13, 2024. 1 changed file with 267 additions and 0 deletions.
    267 changes: 267 additions & 0 deletions spacing.css
    View file
    Original file line number Diff line number Diff line change
    @@ -262,3 +262,270 @@
    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;
    }
  3. aytacmalkoc created this gist Sep 23, 2023.
    264 changes: 264 additions & 0 deletions spacing.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,264 @@
    /* 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;
    }