Space will only be added if the element doesn't have any by default. For example,
class="narrow" already includes 20px margin all around, so adding
margintop to this will not increase the space.
- pad classes set the margin to 0 and add relevant padding:
padtop– adds 10px space to the top of an element
padright– adds 20px space to the right of an element
padleft– adds 20px space to the left on an element
padbottom– adds 10px space to the bottom of an element
- margin classes set relevant margins:
margintop– sets 20px space to the top
marginbottom– sets 20px to the bottom
marginleft– sets 20px space to the left
marginright– sets 20px space to the right
marginall– sets 20px margin on all sides
extraspace- specific to lists, increases the spacing between list items. See lists for more information.
Spacing classes can be applied as
class="style" to any element. When there is already a class present, use a space before adding the next one. Some examples:
<h1 class="text-college nopadbottom">
<div class="box-solid squish">
class="left". Instead use
Putting two columns on top of each other results in 40px space in between. In most designs this is fine, in some this is too much space.
You can reduce the amount of space by adding nopadbottom to the first column
<div class="narrow nopadbottom">, or nopadtop to the second column
<div class="narrow nopadtop">