Using padding and custom gaps

There may be situations where you want your containers to have padding around the edges. Some containers, such as the MX Application container, have padding by default; others, such as the Spark Application container, have padding values of 0 by default.

Use the paddingTop, paddingBottom, paddingRight,and paddingLeft style properties to set the padding around the content area of a MX container. To set the padding for a Spark container, you can either use the padding properties of the layout classes, such as HorizontalLayout or VerticalLayout, or define a container skin.

Also, MX containers and Spark layouts define gaps between children, which you might want to change from the default values. If your application has nonzero padding and gaps, Flex reserves the necessary pixels before it sizes any percentage-based components.

Consider the following example:

<?xml version="1.0"?>
<!-- components\PadContainer.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
        
    <s:BorderContainer width="400" height="25">
        <s:layout>
            <s:HorizontalLayout
                paddingLeft="5" 
                paddingRight="5"
                gap="15"/>                
        </s:layout>
        
        <s:Button id="b1"
            label="Label 1" 
            width="75%"/>
        <s:Button id="b2"
            label="Label 2" 
            minWidth="120"/>
        <s:Button id="b3"
            label="Label 3"/>
    </s:BorderContainer>

    <s:Form>
        <s:FormItem label="Button #1:">
            <s:Label text="{b1.width}"/>
        </s:FormItem>
        <s:FormItem label="Button #2:">
            <s:Label text="{b2.width}"/>
        </s:FormItem>
        <s:FormItem label="Button #3:">
            <s:Label text="{b3.width}"/>
        </s:FormItem>
    </s:Form>
</s:Application>

The executing SWF file for the previous example is shown below:

The left and right padding of the container is set to 5 pixels, and the gap between children is 15 pixels. The default width of the third button is 70 pixels. That leaves 288 pixels for the two percentage-based components. The second button requires its minimum size of 120 pixels, leaving 168 pixels available for the first button.