The relative layouts (Horizontal/Vertical) provide a few options to help control whitespace between their child components. This section explores paddings and gaps, which are the properties used to control whitespace in relative layouts.
If you’ve used much CSS, you’re probably familiar with the concept of padding, which lets you specify a number of pixels by which to pad a container. Padding, which is available only to the relative layouts, creates space between a container’s borders and its child components. The specific padding properties include
If you add a few buttons to a
Panel with a vertical layout, by default the buttons will situate at the top-left corner, align vertically, and hug the left edge of the container. However, you can create space between a container and its components by setting padding properties, as demonstrated by Example 9-15 and Example 9-16 and Figure 9-8.
In Spark containers, padding is applied as properties of the nested layout, like in Example 9-15.
Example 9-15. Applying padding to the nested layout of a Spark Panel
><s:layout> <s:VerticalLayout paddingTop="10" paddingLeft="10"/> </s:layout>
Halo containers, on the other hand, take padding properties directly; notice also in Example 9-16 that the layout is declared as a container ...