measure various CSS units

by Brenton Strine

HTML

<div class="inch"></div>
<div class="cm"></div>
<div class="pt"></div>
<div class="px"></div>
<div class="mm"></div>
<div class="em"></div>
<div class="ex"></div>

CSS

.inch { width:1in;}
.cm {width:1cm;}
.pt {width:1pt;}
.px {width:10px;}
.mm {width:1mm;}
.em {width:1em;}
.ex {width:1ex;}
div {box-shadow: inset 0 0 0 1px #000; height: 1em;}

JavaScript

var tWidth = "";
$("div").each(function(){
  tWidth += $(this).attr("class") + " = " + $(this).outerWidth() + "px\n";
});
alert(tWidth);