Margin & Padding

Margins og padding er brukt til å lage avstand mellom elementer. Margin er avstanden utapå elementet, mens padding er avstanden inni elementet.

Størrelse

10 forskjellige størrelser

Navn
--none
--mini
--tiny
--small
--base
--medium
--large
--larger
--huge
--max

Klasser for spesifikke sider

Klassene settes til en renting og størrelse. f.eks: padding-top--large

X setter right og left

Y setter top og bottom

${margin||padding}-{side}--{size}
top right bottom left x y
margin-top--*
padding-top--* 		margin-right--*
padding-right--* 		margin-bottom--*
padding-bottom--* 		margin-left--*
padding-left--* 		margin-x--*
padding-x--* 		margin-y--*
padding-y--*

Egen definerte klasser

Unike klasser

padding--no-side-mobile
Ingen padding på siden på mobil
margin--no-margin-on-mobile
Ingen margin på mobil

Klasser for alle sidene

Klassene setter en størrelse på alle sider

${margin||padding}--{size}
Navn Px størrelse Rem størrelse
margin--none
padding--none		 0px 0rem
margin--mini
padding-mini		 4px 0.3rem
margin--tiny
padding--tiny		 8px 0.5rem
margin--small
padding--small		 12px 0.75rem
margin--base
padding--base		 16px 1rem
margin--medium
padding--medium		 24px 1.5rem
margin--large
padding--large		 32px 2rem
margin--larger
padding--larger		 40px 2.5rem
margin--huge
padding--huge		 48px 3rem
margin--max
padding--max		 80px 5rem

Eksempel alle sider:

Margin alle sider

Margin--none
Margin--tiny
Margin--small
Margin--base
Margin--medium
Margin--large
Margin--larger
Margin--huge
Margin--max

Padding alle sider

Padding--none
Padding--tiny
Padding--small
Padding--base
Padding--medium
Padding--large
Padding--larger
Padding--huge
Padding--max

Eksempel en side:

Margin forskjellige sider

Margin-top--tiny
Margin-bottom--huge
Margin-left--base
Margin-right--max
Margin-left--base

Padding forskjellige sider

Padding-top--large
Padding-bottom--none
Padding-left--base
Padding-right--max
Padding-top--base