Note: with most Emmet expressions, the default unit of measure is pixels. However, that can be overruled by specifying a unit.
For example m20 will produce a 20 px margin, but m20% or m20p will produce a 20% margin. Likewise, fz3r will produce a font-size of 3rem.
Note, also, that some expressions have multiple forms. For example d:g or just dg will both produce display:grid.
Ultimately, Emmet CSS is wonderfully intuitive: nearly all the abbreviations are easily guessable.
Box Model
m10 /* margin: 10px; */
mt10 /* margin-top: 10px; */
mr10 /* margin-right: 10px; */
mb10 /* margin-bottom: 10px; */
ml10 /* margin-left: 10px; */
p10 /* padding: 10px; */
pt10 /* padding-top: 10px; */
pr10 /* padding-right: 10px; */
pb10 /* padding-bottom: 10px; */
pl10 /* padding-left: 10px; */
Sizing
w100 /* width: 100px; */
h100 /* height: 100px; */
minw200 /* min-width: 200px; */
maxw600 /* max-width: 600px; */
minh100 /* min-height: 100px; */
maxh400 /* max-height: 400px; */Display
d:n /* display: none; */
d:b /* display: block; */
d:ib /* display: inline-block; */
d:i /* display: inline; */
d:f /* display: flex; */
d:g /* display: grid; */Positioning
pos:r /* position: relative; */
pos:a /* position: absolute; */
pos:f /* position: fixed; */
pos:s /* position: static; */
t0 /* top: 0; */
r0 /* right: 0; */
b0 /* bottom: 0; */
l0 /* left: 0; */
z10 /* z-index: 10; */Flexbox
fxd:r /* flex-direction: row; */
fxd:c /* flex-direction: column; */
fxw:w /* flex-wrap: wrap; */
fxw:nw /* flex-wrap: nowrap; */
jc:c /* justify-content: center; */
jc:sb /* justify-content: space-between; */
jc:sa /* justify-content: space-around; */
jc:se /* justify-content: space-evenly; */
jc:fs /* justify-content: flex-start; */
jc:fe /* justify-content: flex-end; */
ai:c /* align-items: center; */
ai:fs /* align-items: flex-start; */
ai:fe /* align-items: flex-end; */
ai:s /* align-items: stretch; */
ac:c /* align-content: center; */
g20 /* gap: 20px; */
rg10 /* row-gap: 10px; */
cg10 /* column-gap: 10px; */
fx1 /* flex: 1; */Grid
gtc:3 /* grid-template-columns: repeat(3, 1fr); */
gtr:2 /* grid-template-rows: repeat(2, 1fr); */
gaf:r /* grid-auto-flow: row; */
gaf:c /* grid-auto-flow: column; */Typography
fz16 /* font-size: 16px; */
fw700 /* font-weight: 700; */
ff:s /* font-family: serif; */
ff:ss /* font-family: sans-serif; */
fs:i /* font-style: italic; */
lh1.5 /* line-height: 1.5; */
ta:c /* text-align: center; */
td:n /* text-decoration: none; */
tt:u /* text-transform: uppercase; */
ls1 /* letter-spacing: 1px; */
ws:nw /* white-space: nowrap; */Color & Background
c#333 /* color: #333; */
c:inherit /* color: inherit; */
bgc#f5f5f5 /* background-color: #f5f5f5; */
bgi:none /* background-image: none; */
bgr:nr /* background-repeat: no-repeat; */
bgp:c /* background-position: center; */
bgs:c /* background-size: cover; */
op50 /* opacity: 0.5; */Borders & Radius
bd1#000 /* border: 1px solid #000; */
bdb1#000 /* border-bottom: 1px solid #000; */
bdrs6 /* border-radius: 6px; */
bdrs50p /* border-radius: 50%; */Shadows
bxsh:0 2 10 rgba(0,0,0,.2). /* box-shadow: 0 2px 10px rgba(0,0,0,.2); */
tsh:0 1 2 rgba(0,0,0,.2) /* text-shadow: 0 1px 2px rgba(0,0,0,.2); */Overflow
ov:h /* overflow: hidden; */
ov:a /* overflow: auto; */
ov:s /* overflow: scroll; */
ovx:h /* overflow-x: hidden; */
ovy:a /* overflow-y: auto; */Transitions & Transforms
trs /* transition: all .3s ease; */
trf:tx(-50%) /* transform: translateX(-50%); */
trf:ty(-50%) /* transform: translateY(-50%); */Common Layout Starter
d:f /* display: flex; */
jc:c /* justify-content: center; */
ai:c /* align-items: center; */
g20 /* gap: 20px; */