Title: CSS Margin & Padding Utility Author: Jakobodb Published: 29 Novembre 2016 Last modified: 26 Maggio 2017 --- Ricerca i plugin Questo plugin **non è stato testato con le ultime 3 versioni principali (major releases) di WordPress**. Potrebbe non essere più mantenuto, o supportato, e potrebbe presentare problemi di compatibilità se utilizzato con versioni più recenti di WordPress. ![](https://s.w.org/plugins/geopattern-icon/cxx-margin-and-padding-utility.svg) # CSS Margin & Padding Utility Di [Jakobodb](https://profiles.wordpress.org/jakobodb/) [Scarica](https://downloads.wordpress.org/plugin/cxx-margin-and-padding-utility.2.0.1.zip) * [Dettagli](https://it.wordpress.org/plugins/cxx-margin-and-padding-utility/#description) * [Recensioni](https://it.wordpress.org/plugins/cxx-margin-and-padding-utility/#reviews) * [Installazione](https://it.wordpress.org/plugins/cxx-margin-and-padding-utility/#installation) * [Sviluppo](https://it.wordpress.org/plugins/cxx-margin-and-padding-utility/#developers) [Supporto](https://wordpress.org/support/plugin/cxx-margin-and-padding-utility/) ## Descrizione 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) ## Installazione 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. ## Recensioni Non ci sono recensioni per questo plugin. ## Contributi e sviluppo “CSS Margin & Padding Utility” è un software open source. Le persone che hanno contribuito allo sviluppo di questo plugin sono indicate di seguito. Collaboratori * [ Jakobodb ](https://profiles.wordpress.org/jakobodb/) [Traduci “CSS Margin & Padding Utility” nella tua lingua.](https://translate.wordpress.org/projects/wp-plugins/cxx-margin-and-padding-utility) ### Ti interessa lo sviluppo? [Esplora il codice](https://plugins.trac.wordpress.org/browser/cxx-margin-and-padding-utility/) segui il [repository SVN](https://plugins.svn.wordpress.org/cxx-margin-and-padding-utility/), segui il [log delle modifiche](https://plugins.trac.wordpress.org/log/cxx-margin-and-padding-utility/) tramite [RSS](https://plugins.trac.wordpress.org/log/cxx-margin-and-padding-utility/?limit=100&mode=stop_on_copy&format=rss). ## 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 ## Meta * Versione **2.0.1** * Ultimo aggiornamento **9 anni fa** * Installazioni attive **70+** * Versione WordPress ** 3.0.1 o superiore ** * Testato fino alla versione **4.7.38** * Lingua * [English (US)](https://wordpress.org/plugins/cxx-margin-and-padding-utility/) * Tag * [css](https://it.wordpress.org/plugins/tags/css/)[margin](https://it.wordpress.org/plugins/tags/margin/) [padding](https://it.wordpress.org/plugins/tags/padding/)[utility](https://it.wordpress.org/plugins/tags/utility/) * [Visualizzazione avanzata](https://it.wordpress.org/plugins/cxx-margin-and-padding-utility/advanced/) ## Valutazioni Non sono state ancora inviate recensioni. [La tua recensione](https://wordpress.org/support/plugin/cxx-margin-and-padding-utility/reviews/#new-post) [Vedi tutte le recensioni](https://wordpress.org/support/plugin/cxx-margin-and-padding-utility/reviews/) ## Collaboratori * [ Jakobodb ](https://profiles.wordpress.org/jakobodb/) ## Supporto Hai qualcosa da dire? Ti serve aiuto? [Chiedi nel forum di supporto](https://wordpress.org/support/plugin/cxx-margin-and-padding-utility/)