Bootstrap Chameleon Logo

Padding and Margin

In the previous article {filename}006_slate_02_layout-1_directional.md]({filename}006_slate_02_layout-1_directional.md), we used "Padding": 16 to specify the space occupied by the widget.

In this article, let's see what exactly Padding refers to, and explain the differences between several similar keywords.

Padding of Content

As shown in the following figure, we created an SBorder with no Content (child widget size is 0) and a Padding value of 16, so the actual size of SbBorder is 32X32 px.

    ...
    "Root":{
        "SVerticalBox":
        {
            "Slots": [
                {
                    "AutoHeight": true,
                    "SHorizontalBox":
                    {
                        "Slots": [
                            {
                                "AutoWidth": true,
                                "SBorder": {
                                    "BorderBackgroundColor": [0, 1, 0, 1], "BorderImage": { "Style": "FEditorStyle", "Brush": "DashedBorder"},
                                    "Padding": 16
                                }
                            }
                        ]
                    }
                }
            ]
        }
    }

A SBorder snapshot with 'padding: 16'

NOTE
At this point, the Padding is inside the "SBorder", adding blank space around the inner widget (empty).

Padding of Slot

When we add "Padding" outside the SBorder, now the "Padding" modifies the first Slot in the "SHorizontalBox", so the blank space is added to the outside of the "SBorder".

    ...
    "AutoHeight": true,
    "SHorizontalBox":
    {
        "Slots": [
            {
                "AutoWidth": true,
                "Padding": 10,
                "SBorder": {
                    "BorderBackgroundColor": [0, 1, 0, 1], "BorderImage": { "Style": "FEditorStyle", "Brush": "DashedBorder"},
                    "Padding": 16
                }
            }
        ]
    }

A snapshot illustrating the 'slot padding'

Comparing with the "SBorder" without adding Slot Padding, the green frame around the newly added 10px blank space:

    ...
    "SHorizontalBox":
    {
        "Slots": [
            {
                "AutoWidth": true,
                "Padding": 10,
                "SBorder": {
                    "BorderBackgroundColor": [0, 1, 0, 1], "BorderImage": { "Style": "FEditorStyle", "Brush": "DashedBorder"},
                    "Padding": 16
                }
            },
            {
                "AutoWidth": true,
                "SBorder": {
                    "BorderBackgroundColor": [1, 1, 1, 1], "BorderImage": { "Style": "FEditorStyle", "Brush": "DashedBorder"},
                    "Padding": 16
                }
            }
        ]
    }

Comparison of widget padding and slot padding

If we add a button to the Content:

    ...
    "AutoWidth": true,
    "SBorder": {
        "BorderBackgroundColor": [0, 1, 0, 1], "BorderImage": { "Style": "FEditorStyle", "Brush": "DashedBorder"},
        "Padding": 16,
        "Content":{
            "SButton": { 
                "Text": "A Button" 
            }
        }
    }
    ...

The "SButton" occupies the position of the previous "empty widget" in the "SBorder", with its outer edge being "Padding: 16", and the green frame's outer edge is the Slot's "Padding: 10".

Snapshot showing the padding between the SButton and the SBorder

So, the size of SBorder becomes the size of the inner button plus the size of Padding.

ContentPadding of Button

If we think the button looks too cramped and want to make a "more important" button, we can adjust the button size using the "ContentPadding" in the SButton:

    ...
    "SButton": {
        "ContentPadding": [16, 8],
        "Text": "A Button"
    }
    ...

16px of blank space is added to both sides of the horizontal direction and 8px of blank space is added to both sides of the vertical direction inside the button.

Snapshot of 'ContentPadding' defining the space within the SButton

Padding of Text

Some text widgets can also set Padding values, as shown in the following "SEditableTextBox":

Snapshot of SEditableTextBox without padding value

    ...
    "SBorder": {
        "BorderBackgroundColor": [0, 1, 0, 1], "BorderImage": { "Style": "FEditorStyle", "Brush": "DashedBorder"},
        "Content":{
                "SEditableTextBox": {
                    "Padding": 20,
                    "Text": "Text Input"
            }
        }
    }

After adding "Padding": 20, the text "Text Input" has 20px of blank space added around it.

Snapshot of SEditableTextBox with 'Padding' values

Margin of Text

The following example is an "SMultiLineEditableTextBox", which has a "Margin" property in addition to the "Padding" property:

SMultiLineEditableTextBox without padding field, only margin

    "SBorder": {
        "BorderBackgroundColor": [0, 1, 0, 1], "BorderImage": { "Style": "FEditorStyle", "Brush": "DashedBorder"},
        "Padding": 16,
        "Content":{
                "SMultiLineEditableTextBox": {
                    "Padding": 10,
                    "Text": "SMultiLineEditableTextBox"
            }
        }
    }

After adding "Padding": 10, the same behavior as other widgets in the above text occurs, with 10px of blank space added around the text:

Snapshot of SMultiLineEditableTextBox with 'Margin' effect

加上"Margin": 30

    "SBorder": {
        "BorderBackgroundColor": [0, 1, 0, 1], "BorderImage": { "Style": "FEditorStyle", "Brush": "DashedBorder"},
        "Padding": 16,
        "Content":{
                "SMultiLineEditableTextBox": {
                    "Padding": 10,
                    "Margin": 30
                    "Text": "SMultiLineEditableTextBox"
            }
        }
    }

Now, the surrounding blank area becomes 10px of "Padding" + 30px of "Margin". Note the mouse display status in the animation below. When the mouse is within the inner 30px, the cursor is an "I" shape for text input. If you enable the green solid Debug box, you can see that the "Margin": 30 is on the inside of the widget, and the "Padding": 10 is on the outside.

GIF demonstrating the difference between margin and padding clickable areas

Displaying the margin and padding of the widget

NOTE
Here, the Margin is on the inside, which is different from the outer Margin in HTML web widgets.

Padding Value Input

In JSON, when filling in Padding, Margin, and other values, we have three ways to write:

  1. Padding value is a number. For example, in the following example, the Padding value is 16 for all four directions (left, right, top, and bottom).
    "Padding": 16,
  1. Padding value is an array of length 2. For example, in the following example, the horizontal Padding value is 16, and the vertical Padding value is 12.
    "Padding": [16, 12],
  1. Padding value is an array of length 4. For example, in the following example, the Padding values for the left, top, right, and bottom (clockwise) are 10, 20, 30, and 40, respectively.
    "Padding": [10, 20, 30, 40],

Summary

  • "SHorizontalBox", "SVerticalBox" and other Layout widgets use "Padding".
  • "ContentPadding" is specific to the SButton component.
  • Most text widgets have a Margin property, and text widgets with a border have a "Padding" property.
  • "Margin" captures the mouse inside, while "Padding" does not.

Cheat Sheet

Slate Description ζœ‰ζ•ˆ
Slot Padding ok
SBorder Padding
SButton ContentPadding ok
SBox Padding
SEditableText - No padding or margin
STextBlock Margin
SEditableTextBox Padding new
SMultiLineEditableText Margin only margin
SMultiLineEditableTextBox Padding + Margin
SRichTextBlock Margin

Padding and margin of each widget

Padding Margin
Slot
SBorder Yes
SButton
SBox
STextBlock No Yes
SEditableText No No
SEditableTextBox Yes No -- > : public SBorder
SMultiLineEditableText No Yes
SMultiLineEditableTextBox Yes Yes -- > : public SBorder
SRichTextBlock No Yes