Flex Tip: Positioning components in Adobe Flex with no default gaps, padding or margins

If you're new to Flex and you've been banging your head against a wall trying to get components to position themselves properly then hopefully this tip will help.

By default Flex adds about a 10px margin around most components. For example if you're trying to create a row of buttons that are all butted right up against each other with no space in between the following code won't cut it.

<!-- these buttons will all have about a 10px gap in between them -->
<mx:HBox>
<mx:Button label='Button 1'/>
<mx:Button label='Button 1'/>
<mx:Button label='Button 1'/>
</mx:Hbox>

To make that gap go away you need to add horizontalGap="0" to the HBox tag as in the following example

<!-- these buttons will have no gap in between them -->
<mx:HBox horizontalGap="0">
<mx:Button label='Button 1'/>
<mx:Button label='Button 1'/>
<mx:Button label='Button 1'/>
</mx:Hbox>

So there you go. horizontalGap="0" and like wise verticalGap="0" is what you're looking for if you can't figure out why your components have a default margin.