This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

CSS Margin & Padding Utility

Description

This utility plugin adds a series of css classes that allow easy addition of set padding and margin to any element.

For basic use, the classes follow the format of [margin / padding][location letter: all, top, right, bottom, left, vertical, horizontal][amount: none, small, medium, large, extra large (0.5em, 1em, 2em, 4em)]

Also in the basic classes are percentages, taking the place of the last letter in the format [p][percentage] e.g. p7-5 for 7.5% or p15 for 15%.

Examples of Basic Classes:

  • man > margin all none = margin: 0px;
  • prl > padding right large = padding-right: 2em;
  • mvp5 > margin vertical 5% = margin: 5% 0;

Additional utility classes – First / Last child, Child / Sub

To add selective classes for adding margin / padding to the first / last child, any child, or any sub-element of the required element, simply add β€˜last-β€˜, β€˜first-β€˜, β€˜child-β€˜, or β€˜sub-β€˜ to the beginning of the basic classes.

Examples of Child Classes

  • last-mhxl > last-child margin horizontal extra large = last-mhxl :last-child { margin: 0 4em; }
  • last-pbn > last-child padding bottom none = last-pbn :last-child { padding-bottom: 0; }
  • first-mtm > first-child margin top medium = first-mtm :first-child { margin-top: 2em; }
  • child-mal > child margin all large = child-mal > * { margin: 4em; }
  • sub-php5 > sub elements padding horizontal 5 percent = sub-php5 * { padding: 0 5%; }

Additional utility classes – Responsive margin / padding

You can also apply the margin / padding required to certain screen widths, ranging from xl (min: 1200px) to xs (max: 480px). To use these responsive classes, add -[screen-size] to the end of the basic classes.

Examples of Responsive Classes

  • mrm-lg > margin right medium, large screen = (max-width: 1199px) and (min-width: 980px) margin-right: 2em;
  • pas-xs > padding all small, xsmall screen = (max-width: 480px) padding: 0.5em;
  • mhp15-md > margin horizontal 15%, medium screen = (max-width: 979px) and (min-width: 768px) margin-left: 15%; margin-right: 15%;

Full Table of Options

[margin / padding]
m = margin
p = padding

[location]
a = all
t = top
r = right
b = bottom
l = left
v = vertical (top + bottom)
h = horizontal (left + right)

[amount]
s = small (0.5em)
m = medium (1.0em)
l = large (2.0em)
xl = extra large (4.0em)
p5 = 5 percent (5.0%)
p7-5 = 7.5 percent (7.5%)
p10 = 10 percent (10.0%)
p12-5 = 12.5 percent (12.5%)
p15 = 15 percent (15.0%)

[first / last] (prefix)
first- = > :first-child
last- = > :last-child

[child / sub] (prefix)
child- = > *
sub- = *

[screen-size] (suffix)
-xs = max-width: 480px
-sm = max-width: 767px and min-width: 481px
-md = max-width: 979px and min-width: 768px
-lg = max-width: 1199px and min-width: 980px
-xl = min-width: 1200px

Additional utility classes – Boxshadow

Using the boxshadow utility classes, you can quickly add a boxshadow to divs and other elements. The format of the utility classes is as follows: shadowout-[direction][blur]-[shadow opacity].

Examples of Boxshadow

  • shadowout-nm-medium > no direction, medium blur, medium opacity = box-shadow: 0 0 .15em 0 rgba(0,0,0,0.27);
  • shadowout-brm-dark > bottom-right direction, medium blur, dark opacity = box-shadow: .15em .15em .3em 0 rgba(0,0,0,0.54);

Options for Boxshadow utility

[direction]
all directions shift the shadow by .15em
n = none
t = top
b = bottom
l = left
r = right
tl = top-left
tr = top-right
bl = bottom-left
br = bottom-right

[blur]
s = small (.15em)
m = medium (.3em)
l = large (.6em)

[shadow opacity]
-light = light (0.135 opacity)
-medium = medium (0.27 opacity)
-dark = dark (0.54 opacity)

Installation

Installation:

  1. Upload the plugin files to the /wp-content/plugins/ directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the β€˜Plugins’ screen in WordPress.
  3. Use the classes (examples given above) to easily and quickly add padding and margin to any element.

FAQ

Installation Instructions

Installation:

  1. Upload the plugin files to the /wp-content/plugins/ directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the β€˜Plugins’ screen in WordPress.
  3. Use the classes (examples given above) to easily and quickly add padding and margin to any element.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“CSS Margin & Padding Utility” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

2.0.1

  • Fixed: Bug with responsive utility; xs and xl not working due to syntax error.

2.0.0

  • Extensive use of scss to clean up css files and compile down to one css include for all margin and padding utils

  • Addition of child- and sub- selectors for margin and padding util

  • Bugfix: changing implementation of first- and last- to only affect immediate descendants

1.2.2

  • Updating readme with further instructions and guides

  • Fixing override issue with responsive margin and padding

1.2.1

  • Cleaning up of code and files

1.2

  • Use of SCSS to generate the necessary CSS files

  • Addition of flexbox util

1.1

  • Addition of :first-child and :last-child selectors

  • Addition of responsive classes

  • Extra boxshadow util

1.0

  • Basic Classes