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
   
Add Padding and Margin To Elements Using CSS Classes - jQuery margin-padding.js

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.