title: Flex 3: Top align Image and Label
body: <p>In Adobe Flex 3, I have an HBox containing an Image and a Label:</p>
  
  <pre><code>&lt;mx:HBox width="240" verticalAlign="top" horizontalGap="8"&gt;
      &lt;mx:Image width="46" source="@Embed(source='/assets/blah.swf')"/&gt;
      &lt;mx:Label text="Blah."/&gt;
  &lt;/mx:HBox&gt;
  </code></pre>
  
  <p>My Goal is to align the top edge of the Image and the top edge of the Label (the top of capital characters within the Label, that is). However, no matter what properties and styles I fiddle with, a constant "padding" (in quotes because paddingTop is zero) of some 6 pixels remains above the Label, setting its top edge below the Image's. Does anyone know why?</p>
  
  <p>Thanks, Simon</p>
  
  <p><strong>edit:</strong></p>
  
  <p>paddingTop is not doing the trick. I'm seeing the same behaviour on this:</p>
  
  <pre><code>&lt;mx:HBox width="240" verticalAlign="top" paddingTop="0"&gt;
      &lt;mx:Canvas width="46" height="46" backgroundColor="red" paddingTop="0"/&gt;
      &lt;mx:Label text="Blah." paddingTop="0"/&gt;
  &lt;/mx:HBox&gt;
  </code></pre>
  
  <p>I also verified that there's no global stylesheet interfering with any of those classes.</p>
  
  <p><strong>edit 2:</strong></p>
  
  <p>From the mx.core.UITextField source code (Flex 3.2.0) which is used internally by Label, ll. 159:</p>
  
  <blockquote>
  <pre><code>    /*
          The width and height of the TextField are 4 pixels greater than
          the textWidth and textHeight.
      */
  </code></pre>
    
    <p>and also</p>
  
  <pre><code>   public function get measuredHeight():Number
     {
     (...)
         return textHeight + TEXT_HEIGHT_PADDING;
     (...)
     }
  </code></pre>
  </blockquote>
  
  <p>Then I set my Label's paddingTop to -4, and voilà, problem solved! It's not really a clean solution, though...</p>