<p>All CSS width units, based on 10 as a multiplier and 14px font on labels.</p>
<h2>Fixed widths</h2>
<div class="in"></div>
<div class="cm"></div>
<div class="pc"></div>
<div class="mm"></div>
<div class="pt"></div>
<div class="px"></div>
<h2>Character widths</h2>
<div class="rem"></div>
<div class="em"></div>
<div class="ch"></div>
<div class="ex"></div>
<h2>Flexible widths</h2>
<div class="vw"></div>
<div class="pct"></div>
:root{
--chars:10;
}
h2{margin-bottom:4px;font-size:140%}
body{
padding:8px;
&>div{
font-size:14px;
--h:28px;
background:#999;
height:var(--h);
margin:0 0 4px;
position:relative;
border-radius:4px;
span{
line-height:var(--h);
padding-left:8px;
position:absolute;
width:200px;
}
}
}
.ch{width:calc(var(--chars)*1ch)}
.cm{width:calc(var(--chars)*1cm)}
.em{width:calc(var(--chars)*1em)}
.ex{width:calc(var(--chars)*1ex)}
.in{width:calc(var(--chars)*1in)}
.mm{width:calc(var(--chars)*1mm)}
.pc{width:calc(var(--chars)*1pc)}
.pct{width:calc(var(--chars)*1%)}
.pt{width:calc(var(--chars)*1pt)}
.px{width:calc(var(--chars)*1px)}
.rem{width:calc(var(--chars)*1rem)}
.vw{width:calc(var(--chars)*1vw)}
View Compiled
$( document ).ready(function() {
$( "body>div" ).each(function( index ) {
var cls = $(this).attr('class');
var val = $(this).width();
$(this).html('<span>'+cls+': '+val+'</span>')
});
});
This Pen doesn't use any external CSS resources.