diff --git a/blog_images/measuring.jpg b/blog_images/measuring.jpg new file mode 100644 index 000000000..4187af34a Binary files /dev/null and b/blog_images/measuring.jpg differ diff --git a/blog_posts/css-units-cheatsheet.md b/blog_posts/css-units-cheatsheet.md new file mode 100644 index 000000000..93aa939b8 --- /dev/null +++ b/blog_posts/css-units-cheatsheet.md @@ -0,0 +1,25 @@ +--- +title: CSS units Cheat Sheet +type: cheatsheet +tags: css,layout,cheatsheet +authors: chalarangelo +cover: blog_images/measuring.jpg +excerpt: Learn everything you need to know about CSS units with this handy cheatsheet. +--- + +- `px`: Absolute pixel value +- `rem`: Relative to the `font-size` of the root element +- `em`: Relative to the `font-size` of the element +- `%`: Relative to the parent element +- `vw`: Relative to the viewport's width, `1vw` = `1%` * viewport width +- `vh`: Relative to the viewport's height, `1vh` = `1%` * viewport height +- `vmin`: Relative to the viewport's smaller dimension, `1vmin` = min(`1vh`, `1vw`) +- `vmax`: Relative to the viewport's larger dimension, `vmax` = max(`1vh`, `1vw`) +- `ch`: Relative to the width of the glyph "0" of the element's font +- `in`: Inches `1in` = `2.54cm` = `96px` +- `pc`: Picas `1pc` = `1in` / `6` = `16px` +- `pt`: Points `1pt` = `1in` / `72` = `1.333px` (approximately) +- `cm`: Centimeters `1cm` = `96px` / `2.54` = `37.8px` (approximately) +- `mm`: Millimeters `1mm` = `1cm` / `10` = `3.78px` (approximately) + +**Image credit:** [Sharon Sivertsen](https://unsplash.com/@sharon223?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)