前言介紹
- 這款 WordPress 外掛「CSS Margin & Padding Utility」是 2016-11-28 上架。
- 目前有 80 個安裝啟用數。
- 上一次更新是 2017-05-26，距離現在已有 2900 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 3.0.1 以上版本才可以安裝。
- 尚未有人給過這款外掛評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
jakobodb |
外掛標籤
css | margin | padding | utility | boxshadow |
內容簡介
這個工具外掛會新增一系列的 CSS 類別，可輕鬆地將設定的內距和邊界添加到任何元素上。
對於基本使用，這些類別遵循以下格式：[margin / padding][位置字母：all、top、right、bottom、left、vertical、horizontal][數量：none、small、medium、large、extra large（0.5em、1em、2em、4em）]
在基本類別中，還有百分比（取代格式中的最後一個字母）[p][百分比]，例如 p7-5 表示 7.5％ 或 p15 表示 15%。
基本類別的範例：
man > margin all none = margin: 0px;
prl > padding right large = padding-right: 2em;
mvp5 > margin vertical 5% = margin: 5% 0;
其他實用類別 - 第一個/最後一個子元素、子元素/子元素下階層
若要針對所需元素的第一個/最後一個子元素、任何子元素或任何子元素下階層添加選擇類別以添加邊界/內距，只需在基本類別前加入「last-」、「first-」、「child-」或「sub-」。
子類別的範例：
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%; }
其他實用類別 - 可回應的邊界/內距
您也可以將所需邊界/內距套用至特定畫面寬度，從 xl（最小：1200px）到 xs（最大：480px）。若要使用這些回應式類別，請在基本類別的末端加入「-[螢幕尺寸] 」。
回應式類別的範例：
mrm-lg > margin right medium, large screen =（最大寬度：1199px）且（最小寬度：980px）margin-right: 2em;
pas-xs > padding all small, xsmall screen =（最大寬度：480px） padding: 0.5em;
mhp15-md > margin horizontal 15%, medium screen =（最大寬度：979px）且（最小寬度：768px）margin-left: 15%; margin-right: 15%;
完整的選項表格
[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]（前綴）
first- =>:first-child
last- =>:last-child
[child / sub]（前綴）
child- =>*
sub- = *
[screen-size]（後綴）
-xs = 最大寬度：480px
-sm = 最大寬度：767px且最小寬度：481px
-md = 最大寬度：979px且最小寬度：768px
-lg = 最大寬度：1199px且最小寬度：980px
-xl = 最小寬度：1200px
其他實用類別 - Boxshadow
使用 Boxshadow 實用類別，您可以快速地將 Boxshadow 添加到 div 和其它元素中。實用類別的格式如下：shadowout-[方向][模糊]-[陰影不透明度]。
Boxshadow 的範例：
shadowout-nm-medium > no direction, medium blur, medium opacity = box-shadow: 0 0 .15em 0 rgba(0,0,0,0.27);
原文外掛簡介
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)
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「CSS Margin & Padding Utility」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.2.1 | 1.2.2 | 1.2.3 | 2.0.0 | 2.0.1 | trunk |
延伸相關外掛（你可能也想知道）
Better Admin Bar 》重新設計 WordPress 管理列。取代預設的 WordPress 管理列，並為已登入的使用者提供他們應有的使用體驗。, Better Admin Bar 讓您可以快速導覽到您網站的主要...。
Admin Bar Fix 》修正管理列在顯示太多項目時的損毀的版面配置，移除討人厭的頂部邊距，隱藏一些不必要的管理列項目, , 修正多行管理列, 移除 WordPress 插入的 32 像素邊距, ...。
Forex Calculators 》這個外掛是一套計算機，可以幫助您和客戶測量您的地段大小或持倉大小、您需要的交易保證金等。, 第三方服務, 本插件依賴由 https://forexcalcs.com 提供的第...。
Pattern CSS – The CSS Editor For Blocks 》外掛介紹總結：這個WordPress外掛可以讓你在任何Block或Pattern上新增自定義的CSS樣式，包括可重複使用的Pattern（可同步或獨立）。與其他類似工具不同的是，...。
Customized WYSIWYG Editor Page Widths 》目前的管理員所使用的所見即所得編輯器會依照您的螢幕大小擴大。在現今的寬螢幕顯示器上，內容會超出正常邊界。目前的解決方案是將視窗最小化，直到編輯器大...。
Profitblue – Financial reporting for WooCommerce 》### 摘要：, Profitblue - 針對 WooCommerce 的財務報告, 無論哪家企業，利潤始終是最重要的指標。我們開發了 Profitblue - 財務報告外掛程式，以協助 WooCom...。