title: Removing right-padding from Ext.JS buttons
body: <p>I have some buttons declared using Ext.NET. They have the following class:</p>
  
  <pre><code>.btn-summary {
      padding-top: 0px;
      padding-bottom: 0px;
      padding-right: 0px;
  }
  </code></pre>
  
  <p>I set the <code>text</code> property on the buttons using the <code>setText</code> function:</p>
  
  <pre><code>myBtn.setText("Some text&lt;div class=\"summary " + myCls + "\"&gt;" + "Some other text"&lt;/div&gt;");
  </code></pre>
  
  <p>There are two classes that apply to the text here: <code>summary</code> and <code>myCls</code> where <code>summary</code> is:</p>
  
  <pre><code>div.summary {
      margin-top: 0px;
      margin-bottom: 0px;
      margin-right: 0px;
      margin-left: 7px;
      padding: 7px;
      display: inline-block;
  }
  </code></pre>
  
  <p>and <code>myCls</code> can be either of two classes, defined programmatically:</p>
  
  <pre><code>.bad {
      background-color: #FF4630;
      border-bottom-color: #FF4630;
      border-top-color: #FF4630;
      font-weight: bold;
      color: white;
      text-align: center;
  }
  
  .good {
      background-color: #00FFB3;
      border-color: #00FFB3;
      font-weight: bold;
      text-align: center;
  }
  </code></pre>
  
  <p>I have observed that everything in this setup works as expected (buttons render where they're supposed to, the highlighted portion goes out to the borders of the button as it's supposed to) except that there's about a two/three-pixel padding outside the boundaries of the <code>div</code> but inside the button which I can't account for. Examination of the HTML reveals the following:</p>
  
  <pre><code>&lt;a class="x-btn btn-summary x-unselectable x-box-item x-toolbar-item x-btn-default-toolbar-small" hidefocus="on" unselectable="on" role="button" aria-hidden="false" aria-disabled="false" tabindex="0" style="right: auto; left: 85px; margin: 0px; top: 0px;"&gt;
      &lt;span id="btnWrap" data-ref="btnWrap" role="presentation" unselectable="on" style="" class="x-btn-wrap x-btn-wrap-default-toolbar-small "&gt; 
          &lt;span id="FaultedDashboardsSummary-btnEl" data-ref="btnEl" role="presentation" unselectable="on" style="" class="x-btn-button x-btn-button-default-toolbar-small x-btn-button-center  x-btn-text"&gt;
              &lt;span id="btnInnerEl" data-ref="btnInnerEl" unselectable="on" class="x-btn-inner x-btn-inner-default-toolbar-small"&gt;
                  Some text
                  &lt;div class="summary good"&gt;
                      Some other text
                  &lt;/div&gt;
              &lt;/span&gt;
          &lt;/span&gt;
      &lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>The issue appears to be the <code>.x-btn-inner-default-toolbar-small</code> class. The problem here is that I can't change this from the Ext.NET side because I only have access down to the top level (the one defined by the <code>a</code> tag) so how can I add a CSS class to the inner-most span from Ext.JS?</p>