Add Padding and Margin To Elements Using CSS Classes - jQuery margin-padding.js
File Size: | 3.3 KB |
---|---|
Views Total: | 507 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
margin-padding.js is a lightweight jQuery plugin that allows you to easily apply paddings and margins to elements using CSS utility classes.
How to use it:
1. Load the main script jQuery-margin-padding.js
after jQuery.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/jQuery-margin-padding.js"></script>
2. Apply margins (in pixels) to an element.
<div class="margin-10"></div> <div class="margin-top-10"></div> <div class="margin-bottom-10"></div> <div class="margin-left-10"></div> <div class="margin-right-10"></div>
3. Apply paddings to an element.
<div class="padding-10"></div> <div class="padding-top-10"></div> <div class="padding-bottom-10"></div> <div class="padding-left-10"></div> <div class="padding-right-10"></div>
4. Or any combination of CSS classes.
<div class="margin-10 padding-10"></div>
<!-- OUTPUT --> <div class="margin-10 padding-10" style="margin: 10px; padding: 10px;"> </div>
This awesome jQuery plugin is developed by FatihKaratepe. For more Advanced Usages, please check the demo page or visit the official website.