PostCSS Negative Padding

A PostCSS plugin which lets you use negative values with padding to increase the hit area without effecting the layout. It uses negative margin to compensate for the padding to prevent movement in the layout.

Usage

Example:

div {
    padding: -20px;
}

Outputs:

div {
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    margin-top: -20px;
    margin-right: -20px;
    margin-bottom: -20px;
    margin-left: -20px;
}

Setup

npm install postcss-negative-padding --save-dev