Flex/mxml: newbie layout issue involving TabBar - actionscript-3

Question

If you run the following mxml code, you'll see there's a gap between the TabBar and the BorderContainer. How to simply remove that gap? I'm having trouble laying it out. Nothing I enter in TabBar (e.g. top="10", or y="10") has any effect.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:VGroup top="10" bottom="20" left="20" right="20">
<s:Group width="100%">
<s:HGroup left="0" top="2">
<s:Label id="titleTextId" text="My Title" fontWeight="bold" fontSize="18"/>
</s:HGroup>
<s:HGroup right="0" verticalAlign="middle">
<s:Button label="Button1" width="65"/>
<s:Button label="Button2" width="65" />
</s:HGroup>
</s:Group>
<s:TabBar id="tabs" dataProvider="{vs}"/>
<mx:ViewStack id="vs" height="100%" width="100%">
<s:NavigatorContent label="Tab 1" width="100%" height="100%">
<s:BorderContainer width="100%" height="100%" borderWeight="1" borderStyle="solid">
<s:Label left="3" top="5" text="This is my first tab..."/>
</s:BorderContainer>
</s:NavigatorContent>
<s:NavigatorContent label="Tab 2" width="100%" height="100%">
<s:BorderContainer width="100%" height="100%" borderWeight="1" borderStyle="solid">
<s:Label left="3" top="5" text="This is my second tab..."/>
</s:BorderContainer>
</s:NavigatorContent>
</mx:ViewStack>
</s:VGroup>

Answer 1

Try the gap attribute, this should do it!
<s:VGroup top="10" bottom="20" left="20" right="20" gap="0">