<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/14/changing-the-padding-between-the-tabs-and-content-in-a-flex-tabnavigator-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="paddingTop:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="20"
                        value="10"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TabNavigator width="360"
            height="120"
            paddingTop="{slider.value}"
            backgroundColor="#666666">
        <mx:VBox id="vb1" label="Red" backgroundColor="red">
            <mx:Label text="width:{vb1.width}, height:{vb1.height}" />
        </mx:VBox>
        <mx:VBox id="vb2" label="Orange" backgroundColor="haloOrange">
            <mx:Label text="width:{vb2.width}, height:{vb2.height}" />
        </mx:VBox>
        <mx:VBox id="vb3" label="Yellow" backgroundColor="yellow">
            <mx:Label text="width:{vb3.width}, height:{vb3.height}" />
        </mx:VBox>
        <mx:VBox id="vb4" label="Green" backgroundColor="haloGreen">
            <mx:Label text="width:{vb4.width}, height:{vb4.height}" />
        </mx:VBox>
        <mx:VBox id="vb5" label="Blue" backgroundColor="haloBlue">
            <mx:Label text="width:{vb5.width}, height:{vb5.height}" />
        </mx:VBox>
    </mx:TabNavigator>

</mx:Application>

