Flex 3: Top align Image and Label

Question

Hi there,

In Adobe Flex 3, I have an HBox containing an Image and a Label:

<mx:HBox width="240" verticalAlign="top" horizontalGap="8">
    <mx:Image width="46" source="@Embed(source='/assets/blah.swf')"/>
    <mx:Label text="Blah."/>
</mx:HBox>

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?

Thanks, Simon

edit:

paddingTop is not doing the trick. I'm seeing the same behaviour on this:

<mx:HBox width="240" verticalAlign="top" paddingTop="0">
    <mx:Canvas width="46" height="46" backgroundColor="red" paddingTop="0"/>
    <mx:Label text="Blah." paddingTop="0"/>
</mx:HBox>

I also verified that there's no global stylesheet interfering with any of those classes.

edit 2:

From the mx.core.UITextField source code (Flex 3.2.0) which is used internally by Label, ll. 159:

    /*
        The width and height of the TextField are 4 pixels greater than
        the textWidth and textHeight.
    */

and also

   public function get measuredHeight():Number
   {
   (...)
       return textHeight + TEXT_HEIGHT_PADDING;
   (...)
   }

Then I set my Label's paddingTop to -4, and voilà, problem solved! It's not really a clean solution, though...

Answer 1

I've just been fiddling around with this and it seems you have to actually set the paddingTop to zero for the Label, because if you don't declare any padding it will use the component's built-in padding, so it won't be zero.

This seemed to be working when I ran the example.

Edit: Dirty, but fixed, right? ;)