KSS Style Guide

31 #Padding Padding

Classes for setting the padding of an element.

Source: dist/standard/standard.css, line 11049

31.1 #Padding - Width Padding Width

Classes for setting the padding width of an element.

Source: dist/standard/standard.css, line 11056

31.1.1 #Padding - Width - 0 .pw*-0

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the padding of element to css var for 0.

Examples
Default styling
A div
.pwa-0
Sets all paddings to 0
A div
.pwx-0
Sets left and right paddings to 0
A div
.pwy-0
Sets top and bottom paddings to 0
A div
.pwt-0
Sets top padding to 0
A div
.pwr-0
Sets right padding to 0
A div
.pwb-0
Sets bottom padding to 0
A div
.pwl-0
Sets left padding to 0
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/standard/standard.css, line 11063

31.1.1.1 #Padding - Width - 0 - sm .pw*-sm-0

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the padding of element to css var for 0 on sm.

Examples
Default styling
A div
.pwa-sm-0
Sets all paddings to 0 on sm
A div
.pwx-sm-0
Sets left and right paddings to 0 on sm
A div
.pwy-sm-0
Sets top and bottom paddings to 0 on sm
A div
.pwt-sm-0
Sets top padding to 0 on sm
A div
.pwr-sm-0
Sets right padding to 0 on sm
A div
.pwb-sm-0
Sets bottom padding to 0 on sm
A div
.pwl-sm-0
Sets left padding to 0 on sm
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/standard/standard.css, line 11400

31.1.2 #Padding - Width - 1 .pw*-1

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the padding of element to css var for 1.

Examples
Default styling
A div
.pwa-1
Sets all paddings to 1
A div
.pwx-1
Sets left and right paddings to 1
A div
.pwy-1
Sets top and bottom paddings to 1
A div
.pwt-1
Sets top padding to 1
A div
.pwr-1
Sets right padding to 1
A div
.pwb-1
Sets bottom padding to 1
A div
.pwl-1
Sets left padding to 1
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/standard/standard.css, line 11105

31.1.2.1 #Padding - Width - 1 - sm .pw*-sm-1

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the padding of element to css var for 1 on sm.

Examples
Default styling
A div
.pwa-sm-1
Sets all paddings to 1 on sm
A div
.pwx-sm-1
Sets left and right paddings to 1 on sm
A div
.pwy-sm-1
Sets top and bottom paddings to 1 on sm
A div
.pwt-sm-1
Sets top padding to 1 on sm
A div
.pwr-sm-1
Sets right padding to 1 on sm
A div
.pwb-sm-1
Sets bottom padding to 1 on sm
A div
.pwl-sm-1
Sets left padding to 1 on sm
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/standard/standard.css, line 11442

31.1.3 #Padding - Width - 2 .pw*-2

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the padding of element to css var for 2.

Examples
Default styling
A div
.pwa-2
Sets all paddings to 2
A div
.pwx-2
Sets left and right paddings to 2
A div
.pwy-2
Sets top and bottom paddings to 2
A div
.pwt-2
Sets top padding to 2
A div
.pwr-2
Sets right padding to 2
A div
.pwb-2
Sets bottom padding to 2
A div
.pwl-2
Sets left padding to 2
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/standard/standard.css, line 11147

31.1.3.1 #Padding - Width - 2 - sm .pw*-sm-2

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the padding of element to css var for 2 on sm.

Examples
Default styling
A div
.pwa-sm-2
Sets all paddings to 2 on sm
A div
.pwx-sm-2
Sets left and right paddings to 2 on sm
A div
.pwy-sm-2
Sets top and bottom paddings to 2 on sm
A div
.pwt-sm-2
Sets top padding to 2 on sm
A div
.pwr-sm-2
Sets right padding to 2 on sm
A div
.pwb-sm-2
Sets bottom padding to 2 on sm
A div
.pwl-sm-2
Sets left padding to 2 on sm
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/standard/standard.css, line 11484

31.1.4 #Padding - Width - 3 .pw*-3

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the padding of element to css var for 3.

Examples
Default styling
A div
.pwa-3
Sets all paddings to 3
A div
.pwx-3
Sets left and right paddings to 3
A div
.pwy-3
Sets top and bottom paddings to 3
A div
.pwt-3
Sets top padding to 3
A div
.pwr-3
Sets right padding to 3
A div
.pwb-3
Sets bottom padding to 3
A div
.pwl-3
Sets left padding to 3
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/standard/standard.css, line 11189

31.1.4.1 #Padding - Width - 3 - sm .pw*-sm-3

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the padding of element to css var for 3 on sm.

Examples
Default styling
A div
.pwa-sm-3
Sets all paddings to 3 on sm
A div
.pwx-sm-3
Sets left and right paddings to 3 on sm
A div
.pwy-sm-3
Sets top and bottom paddings to 3 on sm
A div
.pwt-sm-3
Sets top padding to 3 on sm
A div
.pwr-sm-3
Sets right padding to 3 on sm
A div
.pwb-sm-3
Sets bottom padding to 3 on sm
A div
.pwl-sm-3
Sets left padding to 3 on sm
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/standard/standard.css, line 11526

31.1.5 #Padding - Width - 4 .pw*-4

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the padding of element to css var for 4.

Examples
Default styling
A div
.pwa-4
Sets all paddings to 4
A div
.pwx-4
Sets left and right paddings to 4
A div
.pwy-4
Sets top and bottom paddings to 4
A div
.pwt-4
Sets top padding to 4
A div
.pwr-4
Sets right padding to 4
A div
.pwb-4
Sets bottom padding to 4
A div
.pwl-4
Sets left padding to 4
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/standard/standard.css, line 11231

31.1.5.1 #Padding - Width - 4 - sm .pw*-sm-4

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the padding of element to css var for 4 on sm.

Examples
Default styling
A div
.pwa-sm-4
Sets all paddings to 4 on sm
A div
.pwx-sm-4
Sets left and right paddings to 4 on sm
A div
.pwy-sm-4
Sets top and bottom paddings to 4 on sm
A div
.pwt-sm-4
Sets top padding to 4 on sm
A div
.pwr-sm-4
Sets right padding to 4 on sm
A div
.pwb-sm-4
Sets bottom padding to 4 on sm
A div
.pwl-sm-4
Sets left padding to 4 on sm
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/standard/standard.css, line 11568

31.1.6 #Padding - Width - 5 .pw*-5

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the padding of element to css var for 5.

Examples
Default styling
A div
.pwa-5
Sets all paddings to 5
A div
.pwx-5
Sets left and right paddings to 5
A div
.pwy-5
Sets top and bottom paddings to 5
A div
.pwt-5
Sets top padding to 5
A div
.pwr-5
Sets right padding to 5
A div
.pwb-5
Sets bottom padding to 5
A div
.pwl-5
Sets left padding to 5
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/standard/standard.css, line 11273

31.1.6.1 #Padding - Width - 5 - sm .pw*-sm-5

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the padding of element to css var for 5 on sm.

Examples
Default styling
A div
.pwa-sm-5
Sets all paddings to 5 on sm
A div
.pwx-sm-5
Sets left and right paddings to 5 on sm
A div
.pwy-sm-5
Sets top and bottom paddings to 5 on sm
A div
.pwt-sm-5
Sets top padding to 5 on sm
A div
.pwr-sm-5
Sets right padding to 5 on sm
A div
.pwb-sm-5
Sets bottom padding to 5 on sm
A div
.pwl-sm-5
Sets left padding to 5 on sm
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/standard/standard.css, line 11610

31.1.7 #Padding - Width - 6 .pw*-6

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the padding of element to css var for 6.

Examples
Default styling
A div
.pwa-6
Sets all paddings to 6
A div
.pwx-6
Sets left and right paddings to 6
A div
.pwy-6
Sets top and bottom paddings to 6
A div
.pwt-6
Sets top padding to 6
A div
.pwr-6
Sets right padding to 6
A div
.pwb-6
Sets bottom padding to 6
A div
.pwl-6
Sets left padding to 6
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/standard/standard.css, line 11315

31.1.7.1 #Padding - Width - 6 - sm .pw*-sm-6

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the padding of element to css var for 6 on sm.

Examples
Default styling
A div
.pwa-sm-6
Sets all paddings to 6 on sm
A div
.pwx-sm-6
Sets left and right paddings to 6 on sm
A div
.pwy-sm-6
Sets top and bottom paddings to 6 on sm
A div
.pwt-sm-6
Sets top padding to 6 on sm
A div
.pwr-sm-6
Sets right padding to 6 on sm
A div
.pwb-sm-6
Sets bottom padding to 6 on sm
A div
.pwl-sm-6
Sets left padding to 6 on sm
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/standard/standard.css, line 11652

31.1.8 #Padding - Width - 7 .pw*-7

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the padding of element to css var for 7.

Examples
Default styling
A div
.pwa-7
Sets all paddings to 7
A div
.pwx-7
Sets left and right paddings to 7
A div
.pwy-7
Sets top and bottom paddings to 7
A div
.pwt-7
Sets top padding to 7
A div
.pwr-7
Sets right padding to 7
A div
.pwb-7
Sets bottom padding to 7
A div
.pwl-7
Sets left padding to 7
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/standard/standard.css, line 11357

31.1.8.1 #Padding - Width - 7 - sm .pw*-sm-7

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Sets the padding of element to css var for 7 on sm.

Examples
Default styling
A div
.pwa-sm-7
Sets all paddings to 7 on sm
A div
.pwx-sm-7
Sets left and right paddings to 7 on sm
A div
.pwy-sm-7
Sets top and bottom paddings to 7 on sm
A div
.pwt-sm-7
Sets top padding to 7 on sm
A div
.pwr-sm-7
Sets right padding to 7 on sm
A div
.pwb-sm-7
Sets bottom padding to 7 on sm
A div
.pwl-sm-7
Sets left padding to 7 on sm
A div
Markup 
<div class="[modifier class]">A div</div>
Source: dist/standard/standard.css, line 11694