title: How does Chrome devtools calculate the computed-metric width of an element?
body: <p>I need to know how Chrome gets the "computed-metric" width of an element in the Computed pane of devtools:</p>
  
  <p><img src="https://i.stack.imgur.com/bEKc8.png" alt="Computed Metrics"></p>
  
  <p>Why does it differ from the content width of an element?  You can test this by scrolling to the bottom of the Computed pane and find the "width:" there (notice it reads "267.484375px" and not the reported "237.458"):</p>
  
  <p><img src="https://i.stack.imgur.com/tc5p6.png" alt="The computed-metric width is not consistent with the Computed-&#39;width&#39;-Property"></p>
  
  <p>TO verify these claims you can utilize the jQuery .width() method, which calculates the content width without the padding irrespective of box-sizing property:</p>
  
  <pre><code>$(".element_class.to_verify").width();
  236.98399925231934
  </code></pre>
  
  <p>Obviously the content width reported by jQuery is a lot different than even the "Computed width Property" reported by Chrome.  SO different it's enough to ruin good designs.. <strong>so how are these "widths" calculated by Chrome</strong> <em>and why are they not consistent?</em></p>
  
  <p>Is it possible there is something wrong with my install or that I'm missing something?</p>