Absolute CSS units<\/h2>\n\n\n\n
Some CSS units depend on certain absolute values and are not affected by any screen size or fonts. These units display may vary depending on different screen resolutions, as they depend on DPI (dots per inch) of screens.<\/p>\n\n\n\n
These units are:<\/p>\n\n\n\n
- \n
- px (pixels)<\/li>\n\n\n\n
- in (inches)<\/li>\n\n\n\n
- cm (centimeter)<\/li>\n\n\n\n
- mm (millimeter)<\/li>\n\n\n\n
- pc (picas)<\/li>\n\n\n\n
- pt (points)<\/li>\n<\/ul>\n\n\n\n
Pixels<\/h3>\n\n\n\n
Pixels are the most commonly used and accepted CSS unit. And it\u2019s considered the base of measurement for many other units. It provides the most consistent result among various devices.<\/p>\n\n\n\n
The
box<\/code> element in the following example has a height of 150px and width of 150px, and it will remain the same on all screen sizes.<\/p>\n\n\n[css]
\n.box{
\nheight:150px;
\nwidth:150px;
\n}
\n[\/css]<\/p>\n\n\n\nAll other absolute units like in (inches), cm (centimeter) and mm (millimeter) are real-world measurement units with very little real-world CSS use cases.<\/p>\n\n\n\n
It\u2019s still good to understand their relationship to pixels, however, so this is how they compare:<\/p>\n\n\n\n
- \n
- 1in = 96px<\/li>\n\n\n\n
- 1cm = 37.8px<\/li>\n\n\n\n
- 1mm = 3.78px<\/li>\n<\/ul>\n\n\n\n
While pc (picas) and pt (points) are directly related to inches.<\/p>\n\n\n\n
- \n
- 1in = 72pt<\/li>\n\n\n\n
- 1in = 6pc<\/li>\n<\/ul>\n\n\n\n
![\"CSS](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/05\/flywheel-unit-conversions-01.png\")
<\/figure>\n\n\n\nThe relation between all absolute units can be demonstrated like this:
<\/p>\n\n\n\nRem<\/h3>\n\n\n\n
Apart from pixels, all other absolute units have very little to no use cases for screen CSS, but since they are real-world measurement units, they can be effectively used in print CSS. (In case you are wondering about pixels, they work fine in print CSS as well!)<\/p>\n\n\n\n
Font-relative CSS units<\/h2>\n\n\n\n
There are some CSS units which depend on the font size or font family of the document or its parent level elements. This includes units like:<\/p>\n\n\n\n
- \n
- em<\/li>\n\n\n\n
- rem<\/li>\n\n\n\n
- ex<\/li>\n\n\n\n
- ch<\/li>\n<\/ul>\n\n\n\n
Em<\/h3>\n\n\n\n
Em is a relative length unit; it depends on the font size of the parent element or the document. By default,
1em<\/code> is equal to16px<\/code> if is nofont-size<\/code> is defined.<\/p>\n\n\n\nEm inherits size from its immediate parent\u2019s font size. So, if a parent element has
font-size:18px<\/code>, then1em<\/code> will be measured as18px<\/code> for all its child’s.<\/p>\n\n\n\nHere we have a div
.post<\/code> with three childs,.post-item<\/code>, with a title and some text.<\/p>\n\n\n[html]
\n<div class=”post”>
\n<div class=”post-item”>
\n<h2>Title<\/h2>
\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
\n<\/div>
\n<div class=”post-item”>
\n<h2>Title<\/h2>
\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
\n<\/div>
\n<div class=”post-item”>
\n<h2>Title<\/h2>
\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
\n<\/div>
\n<\/div>
\n[\/html]<\/p>\n\n\n\nNow the parent
.post<\/code> has afont-size:20px<\/code> and the child element.post div<\/code> has its ownfont-size:1.2em<\/code> withpadding:0.75em<\/code> andmargin:0.75em<\/code>, so the computed padding and margin will be 18px (20px*1.2em*0.75em).<\/p>\n\n\n[css]
\nhtml{
\nfont-size:20px;
\n}<\/p>\n.post{
\nfont-size:20px;
\n}<\/p>\n.post div{
\nfont-size:1.2em;
\n}<\/p>\n.post-item{
\nbackground:pink;
\npadding:0.75em;
\nmargin:0.75em;
\n}<\/p>\n.post-item h2{
\nfont-size:1.5em;
\nmargin:0.5em 0;
\n}<\/p>\n.post-item p{
\nmargin:0;
\nfont-size: 1em;
\n}
\n[\/css]<\/p>\n\n\n\n![\"3](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/05\/image2-662x347.jpg\")
<\/figure>\n\n\n\nAs you can see, the child elements are inheriting values from the parent.
The advantage of using em is, if you decide to change thefont-size<\/code>,padding<\/code>, andmargin<\/code> of each element proportionately, then you just have to change the parent element font size and all other elements will adjust accordingly.<\/p>\n\n\n\nThat won’t be the case with absolute units like px, where you have to adjust each element individually.<\/p>\n\n\n\n
This inheritance nature can be a bit tricky to manage, however, if nested elements have their own
font-size<\/code> in em, too.<\/p>\n\n\n\nLike in the previous demo, if you wrap the title and paragraph inside another
div<\/code> in one of the child items, you\u2019ll will see strange results.<\/p>\n\n\n[html]
\n<div class=”post-item”>
\n<div>
\n<h2>Title<\/h2>
\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
\n<\/div>
\n<\/div>
\n[\/html]<\/p>\n\n\n\n![\"Visual](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/05\/image1-662x366.jpg\")
<\/figure>\n\n\n\nBecause
post-item<\/code> has a nesteddiv<\/code>, the base size will change from 24px to 28.8px (20px*1.2em*1.2em), andfont-size<\/code> andmargin<\/code> forh2<\/code> will change to 43.2px (20px*1.2em*1.2em*1.5em) and 14.4px (20px*1.2em*1.2em*0.5em), respectively.<\/p>\n\n\n\nRem<\/h3>\n\n\n\n
Rem can be really helpful in these types of situations because they always refer to the root element font size, not the parent element.<\/p>\n\n\n\n
If you take the previous example and change the units from em to rem for
.post div<\/code>, you\u2019ll see all child elements fix themselves.<\/p>\n\n\n[css]
\n.post div{
\nfont-size:1.2rem;
\n}
\n[\/css]<\/p>\n\n\n\nOnce the unit is changed from em to rem, its base changes from parent div to root element, which has a
front-size:20px<\/code>.<\/p>\n\n\n\n<\/figure>\n\n\n\nSo, the calculation will be 20px*1.2rem*value and
h2<\/code> andp<\/code> both will have consistentfont-size<\/code> andmargin<\/code>, regardless of their parent.<\/p>\n\n\n\nEx<\/h3>\n\n\n\n
Ex is relative to the x-height of the current font and it’s very rarely used. The x-height measurement is not consistent; sometimes it comes from the font itself and sometimes the browser calculates itself.<\/p>\n\n\n\n
Like em and rem, it depends on font but the major difference is that ex will change when you change the
font-family<\/code> too, which is not the case with the other two.<\/p>\n\n\n[css]
\n.box{
\nwidth:150ex;
\nheight:150ex;
\n}
\n[\/css]<\/p>\n\n\n\nCh<\/h3>\n\n\n\n
Ch is similar to ex but it doesn’t depend on the x-height; rather on the width of the zero (0) character. It also changes with
font-family<\/code>.<\/p>\n\n\n[css]
\n.box{
\nwidth:150ch;
\nheight:150ch;
\n}
\n[\/css]<\/p>\n\n\n\nViewport-relative CSS units<\/h2>\n\n\n\n
There are a few units that depend on the viewport height and width size, such as:<\/p>\n\n\n\n
- \n
- vh (viewport height)<\/li>\n\n\n\n
- vw (viewport width)<\/li>\n\n\n\n
- vmin (viewport minimum)<\/li>\n\n\n\n
- vmax (viewport maximum)<\/li>\n<\/ul>\n\n\n\n
Vh<\/h3>\n\n\n\n
Vh (viewport height) is measured as
1vh<\/code> equal to 1% of the viewport\u2019s height. This unit is very useful for creating full height elements. Vh reacts similarly to percentage, but doesn’t depend on the parent element height.<\/p>\n\n\n\nYou can use vh anywhere but the most common use case of vh is for making full height elements. In this example, the
full-height<\/code> class will create a blue container which will be 100% height of the viewport.<\/p>\n\n\n[css]
\n.full-height{
\nheight:100vh;
\nbackground:blue;
\n}
\n[\/css]<\/p>\n\n\n\nVw<\/h3>\n\n\n\n
![\"6](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/05\/image3-662x253.jpg\")
<\/figure>\n\n\n\n