adobe flex 如何去除 BOX、VBOX、HBOX 之间的空间

Question

<mx:VBox horizontalGap="0" verticalGap="0" height="84" width="164" verticalAlign="middle" styleName="amount">
    <s:Label text="text" width="100%" textAlign="center"/>
    <s:Label text="text" width="100%" textAlign="center"/>
</mx:VBox>
<mx:Box width="1" height="84" borderStyle="solid">

</mx:Box>
<mx:VBox horizontalGap="0" verticalGap="0" height="84" width="144" verticalAlign="middle" styleName="amount">
    <s:Label text="text" width="100%" textAlign="center"/>
    <s:Label text="text" width="100%" textAlign="center"/>
</mx:VBox>

I've tried to use horizontalGap and the VerticalGap setted to 0, but that doesn't work, how to remove the gap between mx boxes?

Answer 1

The "gap" properties specify how much of a gap should be applied when laying out the Box's children.

For example, your code below where the gap properties are 0, means that this VBox should layout it's child elements (the labels) with no vertical gap (the horizontal gap in this case is useless, since we're talking about a VBox ).

<mx:VBox horizontalGap="0" verticalGap="0" height="84" width="164" verticalAlign="middle" styleName="amount">
    <s:Label text="text" width="100%" textAlign="center"/>
    <s:Label text="text" width="100%" textAlign="center"/>
</mx:VBox>

So what is the container that contains all of your boxes above? If that container is a VBox , set the verticalGap of that parent container object to 0. If it's an HBox , set it's horizontalGap to 0.