Easy Margin Helper Classes


/ Published in: CSS
Save to your folder(s)

Easily Modify and Layout html with classes that on the fly create margins


Copy this code and paste it in your HTML
  1. /******* Margin Helpers *******/
  2. /* Margin-All */
  3. .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; }
  4. /* Margin-left */
  5. .ml-3 { margin-left: 3px; } .ml-5 { margin-left: 5px; } .ml-10 { margin-left: 10px; } .ml-15 { margin-left: 15px; } .ml-20 { margin-left: 20px; } .ml-25 { margin-left: 25px; } .ml-30 { margin-left: 30px; }
  6. /* Margin-right */
  7. .mr-3 { margin-right: 3px; } .mr-5 { margin-right: 5px; } .mr-10 { margin-right: 10px; } .mr-15 { margin-right: 15px; } .mr-20 { margin-right: 20px; } .mr-25 { margin-right: 25px; } .mr-30 { margin-right: 30px; }
  8. /* Margin-Horizontal */
  9. .mh-5 { margin-left: 5px; margin-right: 5px; } .mh-10 { margin-left: 10px; margin-right: 10px; } .mh-15 { margin-left: 15px; margin-right: 15px; } .mh-20 { margin-left: 20px; margin-right: 20px; } .mh-25 { margin-left: 25px; margin-right: 25px; } .mh-30 { margin-left: 30px; margin-right: 30px }
  10. /* Margin Vertical */
  11. .mv-5 { margin: 5px 0; } .mv-10 { margin: 10px 0; } .mv-15 { margin: 15px 0; } .mv-20 { margin: 20px 0; } .mv-25 { margin: 25px 0px; } .mv-25 { margin:30px 0; }
  12. /* Margin-bottom */
  13. .mt-3 { margin-bottom: 3px; } .mt-5 { margin-bottom: 5px; } .mt-10 { margin-bottom: 10px; } .mt-15 { margin-bottom: 15px; } .mt-20 { margin-bottom: 20px; } .mt-25 { margin-bottom: 25px; } .mt-30 { margin-bottom: 30px; }
  14. /* Margin-bottom */
  15. .mb-3 { margin-bottom: 3px; } .mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; }

URL: hire.chrisjlee.net

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.