Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/02/changing-the-padding-on-a-button-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Style>
        HSlider {
            labelOffset: 0;
            dataTipPlacement: right;
        }

        .iconButton {
            icon: Embed("bullet_picture.png");
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function init():void {
                leftSlider.value = button.getStyle("paddingLeft");
                rightSlider.value = button.getStyle("paddingRight");
                topSlider.value = button.getStyle("paddingTop");
                bottomSlider.value = button.getStyle("paddingBottom");
                horizontalGapSlider.value = button.getStyle("horizontalGap");
            }

            private function updatePadding():void {
                button.setStyle("paddingLeft", leftSlider.value);
                button.setStyle("paddingRight", rightSlider.value);
                button.setStyle("paddingTop", topSlider.value);
                button.setStyle("paddingBottom", bottomSlider.value);
                button.setStyle("horizontalGap", horizontalGapSlider.value);
            }
        ]]>
    </mx:Script>

    <mx:Array id="labelArr">
        <mx:Number>0</mx:Number>
        <mx:Number>4</mx:Number>
        <mx:Number>8</mx:Number>
        <mx:Number>12</mx:Number>
        <mx:Number>16</mx:Number>
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="paddingLeft:">
                <mx:HSlider id="leftSlider"
                        minimum="0"
                        maximum="16"
                        snapInterval="1"
                        labels="{labelArr}"
                        liveDragging="true"
                        showTrackHighlight="true"
                        change="updatePadding();" />
            </mx:FormItem>
            <mx:FormItem label="paddingRight:">
                <mx:HSlider id="rightSlider"
                        minimum="0"
                        maximum="16"
                        labels="{labelArr}"
                        snapInterval="1"
                        liveDragging="true"
                        showTrackHighlight="true"
                        change="updatePadding();" />
            </mx:FormItem>
            <mx:FormItem label="paddingTop:">
                <mx:HSlider id="topSlider"
                        minimum="0"
                        maximum="16"
                        labels="{labelArr}"
                        snapInterval="1"
                        liveDragging="true"
                        showTrackHighlight="true"
                        change="updatePadding();" />
            </mx:FormItem>
            <mx:FormItem label="paddingBottom:">
                <mx:HSlider id="bottomSlider"
                        minimum="0"
                        maximum="16"
                        labels="{labelArr}"
                        snapInterval="1"
                        liveDragging="true"
                        showTrackHighlight="true"
                        change="updatePadding();" />
            </mx:FormItem>
            <mx:FormItem label="horizontalGap:">
                <mx:HSlider id="horizontalGapSlider"
                        minimum="0"
                        maximum="16"
                        labels="{labelArr}"
                        snapInterval="1"
                        liveDragging="true"
                        showTrackHighlight="true"
                        change="updatePadding();" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Button id="button" label="label" styleName="iconButton" />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

The following example works in Flex 2 and Flex 3:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/29/indenting-flex-accordion-header-labels/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        AccordionHeader {
            paddingLeft: 130; /* pixels */
        }
    </mx:Style>

    <mx:Accordion id="accordion"
            width="100%"
            height="100%">
        <mx:VBox label="One" />
        <mx:VBox label="Two" />
        <mx:VBox label="Three" />
        <mx:VBox label="Four" />
    </mx:Accordion>

</mx:Application>

View source is enabled in the following example.

The following example works in Flex 3:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/29/indenting-flex-accordion-header-labels/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical">

    <mx:Style>
        .accHeader {
            paddingLeft: 130; /* pixels */
        }
    </mx:Style>

    <mx:Accordion headerStyleName="accHeader"
            width="100%"
            height="100%">
        <mx:VBox label="One" />
        <mx:VBox label="Two" />
        <mx:VBox label="Three" />
        <mx:VBox label="Four" />
    </mx:Accordion>

</mx:Application>

View source is enabled in the following example.