VBOX Layout issue with offset of a few pixels for the 2nd and 3rd components.

Question

The VBox has 2 components, on clicking the toggle label on the left,
one component is hidden and the other is made visible.
How does one get rid of the padding at the top when the
2nd component is displayed.
At the end of the script are two images with one showing the small padding.
<?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">
          <fx:Script>
                    <![CDATA[
      protected function lblSearch_clickHandler(event:MouseEvent):void
          // TODO Auto-generated method stub
          _Debug("Inside "+functionName());
          if(tabnavDetails.visible == true) {
          tabnavDetails.visible = false;
          tabnavSearchDetails.height = tabnavDetails.height;
          tabnavSearchDetails.width = tabnavDetails.width;
          tabnavDetails.height = 0;
          tabnavDetails.width = 0;
          tabnavSearchDetails.visible = true;
          } else if(tabnavSearchDetails. visible = true) {
          tabnavSearchDetails.visible = false;
          tabnavDetails.height = tabnavSearchDetails.height;
          tabnavDetails.width = tabnavSearchDetails.width;
          tabnavSearchDetails.height = 0;
          tabnavSearchDetails.width = 0;
          tabnavDetails.visible = true;
                    ]]>
          </fx:Script>
          <fx:Declarations>
                    <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>
          <mx:HBox height="100%" width="100%">
                    <s:Label id="lblSearch" name="lblSearch" buttonMode="true" text="Toggle" color="#2133E4" height="5%" paddingTop="8" click="lblSearch_clickHandler(event)"/>
                    <mx:VBox id="vboxMainBody" name="vboxMainBody" width="80%" height="95%" borderColor="Black"
                                         borderStyle="solid" borderVisible="true" focusColor="#FAFAFA" >
                              <mx:TabNavigator id="tabnavDetails" name="tabnavDetails" visible="true" borderVisible="true" width="100%" height="100%">
                                        <s:NavigatorContent width="100%" height="100%" label="Media Details" >
                                        </s:NavigatorContent>
                                        <s:NavigatorContent width="100%" height="100%" label="Location and Eyeballs">
                                        </s:NavigatorContent>
                              </mx:TabNavigator>
                              <mx:TabNavigator id="tabnavSearchDetails" name="tabnavSearchDetails" visible="false" borderVisible="true" width="0%" height="0%" paddingTop="0">
                                        <s:NavigatorContent width="100%" height="100%" label="Search Details" >
                                        </s:NavigatorContent>
                                        <s:NavigatorContent width="100%" height="100%" label="Location and Eyeballs">
                                        </s:NavigatorContent>
                              </mx:TabNavigator>
                    </mx:VBox>
          </mx:HBox>
</s:Application>

Answer 1

Thank you very much. With so many parameters around and being new to flex, this is not easy. Spent an hour or so and then
decided to ask for help.
Appreciate it.
-Jumroo