title: Changing width of an input element using jQuery 1.7.2 vs 1.8.0+
body: <p>There a difference in size when trying to change the width of an HTML input element when using jQuery 1.7.2 vs jQuery 1.8.0+.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8" &gt;
  &lt;title&gt;Width&lt;/title&gt;
  &lt;!--&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;--&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="container"&gt;
      &lt;div id="letter-container"&gt;
          &lt;input type="button" value="+" class="add" id="btn"/&gt;
      &lt;/div&gt;
      &lt;input type="button" id="change" value="Change"/&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      $("#change").click(function()
      {
          var width = 50;
          $('#letter-container input').width(width).height(width);//.css('line-height', (width) + 'px');
          alert($("#btn").width());
      });    
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If I use 1.8.0+, <code>alert($("#btn").width())</code> shows 50, but FireBug shows width:56px, height:68px.<br/><br/>
  If I use 1.7.2 <code>alert($("#btn").width())</code> shows 32, but FireBug shows width:50px, height:50px.<br/><br/>
  Why such a difference ? I want to use the latest version of jQuery and want what 1.7.2 does. It looks like its the right one.<br/><br/>
  This is how 1.8.0+ shows : <br/><a href="https://imgur.com/moa6OMy" rel="nofollow noreferrer"><img src="https://i.imgur.com/moa6OMy.png" title="source: imgur.com" /></a></p>