Gap between accordion?

1 

        <mx:Accordion selectedIndex="0">
        <mx:HBox label="0" borderStyle="outset">
            <mx:DataGrid rowCount="6">
                <mx:columns>
                    <mx:DataGridColumn dataField="name" headerText="Name" width="65"/>
                    <mx:DataGridColumn dataField="split" headerText="Split" width="65"/>
                    <mx:DataGridColumn dataField="paid" headerText="Paid" width="65"/>
                    <mx:DataGridColumn dataField="total" headerText="Total" width="65"/>
                </mx:columns>
            </mx:DataGrid>
        </mx:HBox>
        <mx:HBox label="1">
            
        </mx:HBox>
        <mx:HBox label="2">
            
        </mx:HBox>
        <mx:HBox label="3">
            
        </mx:HBox>
        <mx:HBox label="4">
            
        </mx:HBox>
        <mx:HBox label="5">
            
        </mx:HBox>
        <mx:HBox label="6">
            
        </mx:HBox>
        <mx:HBox label="7">
            
        </mx:HBox>
    </mx:Accordion>

I found there is a gap between the datagrid and the second accordion tab. The more HBox I add, the bigger gap it has.

Workaround:
I tried to add verticleGap = “0”, this fix the problem. But according to the documentation, verticleGap by default is -1, which still should not see the gap. http://livedocs.adobe.com/flex/3/langref/mx/containers/Accordion.html#effectSummary

Is this possibly a bug or what am I missing?

Thanks.