JSFiddle - React, Tailwind, and code Playground

by iii l

HTML

<div class='parent'>
    <div class='child padding-parent-ignore'></div>
</div>
<br class='clear'><br class='clear'>
<div class='parent'>
    <div class='child'></div>
</div>

CSS

.parent{padding:10px 20px 30px 40px;background-color:red;float:left;}
.child{background-color:green;width:100px;height:100px;}
.clear{clear:both;}

JavaScript

$('.padding-parent-ignore').each(function(){
    var thisParent = $(this).parent();
    ml = '-' + thisParent.css('padding-left');
    mr = '-' + thisParent.css('padding-right');
    mt = '-' + thisParent.css('padding-top');
    mb = '-' + thisParent.css('padding-bottom');
    console.log(ml);
    $(this).css('margin-left', ml)
    $(this).css('margin-right', mr)
    $(this).css('margin-top', mt)
    $(this).css('margin-bottom', mb)
});