JSFiddle - React, Tailwind, and code Playground

by iii l

HTML

<div class='cont'>
    <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>
</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

function paddingIgnore(e) {
    var $this = e,
        $parent = $this.parent(),
        ml = parseInt($parent.css('paddingLeft'), 10),
        mr = parseInt($parent.css('paddingRight'), 10),
        mt = parseInt($parent.css('paddingTop'), 10),
        mb = parseInt($parent.css('paddingBottom'), 10);
    $this.css({
        marginLeft: '-=' + ml + 'px',
        marginRight: '-=' + mr + 'px',
        marginTop: '-=' + mt + 'px',
        marginBottom: '-=' + mb + 'px'
    });
}
$('.padding-parent-ignore').each(function(){
    paddingIgnore($(this));
});