Changing .text() modifies container's margins

Changing .text() modifies container's margins

Using the code from http://jqueryui.com/button/ and modifying it to change the text of the items clicked on, I am surprised that two of the three items' margins shrink to a minimum rect surrounding the text (the only one that maintains its margins is the input button.

So:
    1. Should I be surprised? I'm a noobly, so wouldn't be surprised that I shouldn't be...  ;)
    2. How can I maintain the margin of the containers when the text changes?
Thanks!

Bex

Ref:

  2. <!doctype html>
  3.  
  4. <html lang="en">
  5. <head>
  6.   <meta charset="utf-8" />
  7.   <title>jQuery UI Button - Default functionality</title>
  8.   <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  9.   <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  10.   <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  11.  <!-- <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" /> -->
  12.   <script>
  13.       $(function () {
  14.           $("input[type=submit], a, button")
  15.       .button()
  16.       .click(function (event) {
  17.           event.preventDefault();
  18.           $(this).text("xxxxxxxxxxxxxx");
  19.           $(this).val("xxxxxxxxxxxxxx");
  20.       });
  21.       });
  22.   </script>
  23. </head>
  24. <body>
  25.  
  26. <button>A button element</button>
  27.  
  28. <input type="submit" value="A submit button" />
  29.  
  30. <a href="#">An anchor</a>
  31.  
  32.  
  33. </body>
  34. </html>