Adobe Flex 4.6 Remove Gap in between GridItems

Question

I am using Flex 4.6 and I am fairly new to it...I am using a Grid and inside my Grid is a GridRow and inside this GridRow are 3 GridItems, each item has a border, but there is a gap in between each item and I can't figure out how to get ride of them...here is my code:

<mx:Grid>
        <mx:GridRow>
            <mx:GridItem width="101" height="52.25" horizontalAlign="center" verticalAlign="middle" borderStyle="solid" borderColor="gray">
                <mx:Image source="assets/ruler-icon.png" />
                <s:Label text="{r.currentItem.sqft} sq.ft." fontSize="10" color="#808080" fontFamily="Helvetica" />
            </mx:GridItem>
            <mx:GridItem width="101" height="52.25" horizontalAlign="center" verticalAlign="middle" borderStyle="solid" borderColor="gray">
                <mx:Image source="assets/bed-icon.png" />
                <s:Label text="{r.currentItem.bed}" fontSize="10" color="#808080" fontFamily="Helvetica" />
            </mx:GridItem>
            <mx:GridItem width="101" height="52.25" horizontalAlign="center" verticalAlign="middle" borderStyle="solid" borderColor="gray">
                <mx:Image source="assets/bath-icon.png" />
                <s:Label text="{r.currentItem.bath}" fontSize="10" color="#808080" fontFamily="Helvetica" />
            </mx:GridItem>
        </mx:GridRow>
</mx:Grid>

Any help will be much appreciated.

Answer 1

Doing this removed the gap:

<mx:Grid verticalGap="0" horizontalGap="0">
</mx:Grid>

and thats it!