title: IE and Chrome calculating CSS padding differently
body: <p>I have the following CSS and HTML:</p>
  
  <pre><code>    .TestPadding{
  width:29px;
  text-align:center;
  height:18px;
  padding:3px 0px 2px 0px;
  margin:2px 1px;
  font-family:Trebuchet MS;
  font-weight:bold;
  font-size:13px;
  border:2px solid black;
  float:left;}
  
  &lt;div class="TestPadding"&gt;1&lt;/div&gt;
  &lt;div class="TestPadding"&gt;2&lt;/div&gt;
  &lt;div class="TestPadding"&gt;3&lt;/div&gt;
  &lt;div class="TestPadding"&gt;4&lt;/div&gt;
  &lt;div class="TestPadding"&gt;5&lt;/div&gt;
  &lt;div class="TestPadding"&gt;6&lt;/div&gt;
  &lt;div class="TestPadding"&gt;7&lt;/div&gt;
  &lt;div class="TestPadding"&gt;8&lt;/div&gt;
  &lt;div class="TestPadding"&gt;9&lt;/div&gt;
  &lt;div class="TestPadding"&gt;10&lt;/div&gt;
  </code></pre>
  
  <p>The problem is that the rendering is different in IE and Chrome. Here's what it looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/vsXmE.png" alt="enter image description here"></p>
  
  <p>Chrome is on top and IE on the bottom. On IE, the numbers don't look vertically aligned. I tried making all sorts of combinations on the CSS but none have given me a consistent vertical alignment and sizing.</p>
  
  <p><strong>If you want to try it out, there's a <a href="http://jsfiddle.net/GWzEr/" rel="nofollow noreferrer">**fiddle here</strong>.</a>**</p>
  
  <p>Thanks.</p>