/ Published in: CSS
Easily Modify and Layout html with classes that on the fly create margins
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/******* Margin Helpers *******/ /* Margin-All */ .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; } /* Margin-left */ .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; } /* Margin-right */ .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; } /* Margin-Horizontal */ .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 } /* Margin Vertical */ .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; } /* Margin-bottom */ .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; } /* Margin-bottom */ .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