"margin" and "padding"
- Setting Property Value
- Example

"margin" and "padding"

In Aspire UI, each uiComponent instance has a margin property and a padding property, regardless of whether it is a container or control.

The margin property indicates the thickness of the space surrounding the uiComponent instance.

The padding property indicates the thickness of the interior space from the edge of the uiComponent instance to the content area, which is where child objects (text, image, etc.), if any, are contained.

It is easy to confuse the two properties, so let's get the above visualized in a diagram:

As shown above, the space asserted by margin is transparent, while the space asserted by padding is painted.

Setting Property Value

When setting the property value for margin or padding, you may specify a positive integer, a comma-delimited string (of integer values), or an array (of integer values). If you specify one value, that value is applied to all sides; if you supply two values, the first is applied to top and bottom, the second applied to left and right; if you supply three values, the first is applied to top, second to left and right, third to bottom; if you supply four, each side takes their respective values.¹⁾

  obj.margin = 2;
 // sets thickness to 2px for top, right, bottom and left
 
  obj.margin = "2,5";
 // sets thickness to 2px for top/bottom, 5px for right/left
 
  obj.margin = "2,5,0";
 // sets thickness to 2px for top, 5px for right/left, 0px for bottom
 
  obj.margin = "2,0,1,2";
 // sets thickness to 2px for top, 0px for right, 1px for bottom, 2px for left
 // remember the clock, start at the top, go clockwise

Example

Actionscript 3.0 Example Code

import com.ghostwire.ui.containers.uiPane;
import com.ghostwire.ui.controls.uiText;
 
// ** use a single top-level container **
var topLvl:uiPane = new uiPane();
addChild(topLvl);
 
// ** insert another container inside **
var pane:uiPane = new uiPane();
topLvl.addChild(pane);
 
// ** add content to the pane container **
var txt:uiText = new uiText("Hello World!");
pane.addChild(txt);

The above will generate

In order to see the margin and padding areas more clearly, we give the two containers a different background color:²⁾

topLvl.background = {color:0xeeeeee};
pane.background    = {color:0xdddddd};

Now, give some margin to the pane container:

pane.margin = 20;

And some padding:

pane.padding = 10;

Lastly, we take a look at the W3C CSS-inspired rule for setting the margin property value:

pane.margin = "5,10,20,40"; // ** 5px top, 10px right, 20px bottom, 40px left **

Here is the complete final code:

Actionscript 3.0 MarginPaddingExample class

 1: package
 2: {
 3:     import com.ghostwire.ui.containers.uiPane;
 4:     import com.ghostwire.ui.controls.uiText;
 5:     import com.ghostwire.ui.managers.uiSkins;
 6:
 7:     import flash.display.Sprite;
 8:     import flash.events.Event;
 9:
10:     public class MarginPaddingExample extends Sprite
11:     {
12:         public function MarginPaddingExample()
13:         {
14:             addEventListener(Event.ADDED_TO_STAGE,init);
15:         }
16:
17:         private function init(evt:Event):void
18:         {
19:             // ** optional but recommended **
20:             stage.scaleMode    = "noScale";
21:             stage.align        = "TL";
22:
23:             // ** uncomment to use "classic" theme **
24:             // uiSkins.initialize("classic");
25:
26:             // ** optional but recommended **
27:             // ** let assets preload before starting application **
28:             uiSkins.manager.addEventListener(Event.INIT,main);
29:         }
30:
31:         private function main(evt:Event):void
32:         {
33:             // ** main application code **
34:             // ** use a single top-level container **
35:             var topLvl:uiPane = new uiPane();
36:             addChild(topLvl);
37:
38:             // ** insert another container inside **
39:             var pane:uiPane = new uiPane();
40:             topLvl.addChild(pane);
41:
42:             // ** add content to the pane container **
43:             var txt:uiText = new uiText("Hello World!");
44:             pane.addChild(txt);
45:
46:             // ** give the containers different background colors **
47:             topLvl.background    = {color:0xeeeeee};
48:             pane.background        = {color:0xdddddd};
49:
50:             pane.margin = "5,10,20,40"; // ** 5px top, 10px right, 20px bottom, 40px left **
51:             pane.padding = 10; // ** 10px all sides **
52:         }
53:     }
54: }

MarginPaddingExample.as

¹⁾ If you are familiar with CSS, you should recognize that this is the same rule used for setting the margin and padding properties in CSS.

²⁾ The “background” property can be used to do more than just setting an opaque background - eg. you can also draw a border, a drop shadow, etc. - see API Reference for details.