title: clientWidth and clientHeight report zero while getBoundingClientRect is correct
body: <p>In MDN's <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth" rel="noreferrer">description of Element.clientWidth</a> it says. </p>
  
  <p><sub>
  <em><strong>Note:</strong> I've since updated MDN according to <a href="https://stackoverflow.com/users/360067/potatopeelings&#39;s">@potatopeelings</a> answer.</em>
  </sub></p>
  
  <blockquote>
    <p>The Element.clientWidth property is the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin.</p>
    
    <blockquote>
      <p>This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().</p>
    </blockquote>
  </blockquote>
  
  <p>From this I understand that other than rounding <code>clientWidth</code> should be the same as <code>getBoundingClientRect().width</code>.</p>
  
  <p>However I see that for many elements (where <code>display</code> is <code>inline</code>?) the <code>clientWidth</code> (and height) are zero, while the values returned by <code>getBoundingClientRect</code> seem correct.</p>
  
  <p>Searching on stackoverflow brings some answers saying that this happens before the document is in a <em>ready</em> state but I see this all the time, not just when the page is loading.</p>
  
  <p>This behaviour is consistent for all browsers I checked, where is it specified that this should be the behaviour?</p>
  
  <p><strong>Sample:</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function str(name, width, height) {
    return name + ': (' + width + ', ' + height + ')';
  }
  
  function test() {
    var s = document.getElementById('s');
    var rect = s.getBoundingClientRect();
    document.getElementById('out').innerHTML =
      str('client', s.clientWidth, s.clientHeight) + '&lt;br/&gt;' +
      str('bounding', rect.width, rect.height);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;span id="s"&gt;A span&lt;/span&gt;&lt;br/&gt; &lt;button onclick="test()"&gt;Test&lt;/button&gt;
  &lt;hr /&gt;
  &lt;div id="out"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>