なぜスタイリングはpxで動作しますが、cmでは動作しませんか？

Question

私は基本的に次のHTMLページを持っています。しかし、画面のピクセルからプリンタのセンチメートルに切り替えると、幅がもう合わなくなり、行の幅が変わります。

div.line{ 
    white-space:nowrap; 
    float:left; 
} 

div.a0, div.a1, div.a2, div.a3{ 
    border:0.1cm solid black; 
    display:inline-block; 
    white-space:normal; 
    padding:0px; 
    margin:0px; 
} 

div.b0, div.b1, div.b2, div.b3{ 
    border:1px solid black; 
    display:inline-block; 
    white-space:normal; 
    padding:0px; 
    margin:0px; 
} 
div.a0{width:calc(16cm - 0.2cm);} 
div.a1{width:calc(8cm - 0.2cm);} 
div.a2{width:calc(4cm - 0.2cm);} 
div.a3{width:calc(2cm - 0.2cm);} 
div.b0{width:calc(400px - 2px);} 
div.b1{width:calc(200px - 2px);} 
div.b2{width:calc(100px - 2px);} 
div.b3{width:calc(50px - 2px);} 

for(var a=0;a<2;a++){ 
    var b = String.fromCharCode(97 + a); 
    for(var c=0;c<4;c++){ 
     var d = document.createElement("div"); 
     d.className = "list"; 
     for(var e=0;e<Math.pow(2,c);e++){ 
      var f = document.createElement("div"); 
      f.className = b + c; 
      f.innerHTML = b + c; 
      d.appendChild(f); 
     } 
     document.body.appendChild(d); 
    } 
} 

JSFiddle Example

Answer 1

実際には、ピクセル行の幅も異なります（階段効果）。ブラウザのページの縮尺を変更してみてください（ChromeではCtrl + +）。

あなたが望むように、この作品を作るためには、全くcalcを使用するだけで16cm、8cmなどを使用して、あなたのdiv秒間（CSS3 box-sizing Propertyを参照）box-sizing: border-box;を設定しないでください。

このようにして、枠の幅が要素の幅全体に含まれます。あなたのフィドルの

固定バージョン：https://jsfiddle.net/vog8gyxr/4/

Answer 2

あなたが印刷されたフォント確認する必要がある場合は、フォントサイズを設定するためのPT（またはセンチまたは中）を使用することができる唯一の場所は、印刷用のスタイルシートでありますちょうど一定のサイズです。しかし、そこでさえ、デフォルトのフォントサイズを使用しても通常はより良いです。 cmサイズをpxに計算するだけです。 1cm == 37.8px。 お手伝いしますか。