Layout properties

Layout properties allow you to control the layout, position and display of an element.

Adding layout properties to a style

To add layout properties to a style:

Navigate to the Style builder. This is available when you edit Base styles or Custom styles. For more, see Using the style builder
Within the Style editor area, click on the Properties button
Then select Layout > (Select a Layout sub-group) in the menu.

The Layout properties include the following groups of fields:

Height

Min height - Set the minimum height of an element
Max height - Set the maximum height of an element
Fixed height - Fix the height of an element

For details of each property, see Height properties.

Width

Width - Set the width of an element
Max width - Set the maximum width of an element
Min width - Set the minimum width of an element

For details of each property, see Width properties.

Padding

Padding top - Set the padding top of an element
Padding bottom - Set the padding bottom of an element
Padding left - Set the padding left of an element
Padding right - Set the padding right of an element
Padding equal - Set the padding of all four sides of an element. If a more specific padding is also set E.g. Padding left, this will override the equal padding on the left side

For details of each property, see Padding properties.

Margin

Margin top - Set the margin top of an element
Margin bottom - Set the margin bottom of an element
Margin left - Set the margin left of an element
Margin right - Set the margin right of an element
Margin equal - Set the margin of all four sides of an element. If a more specific margin is also set E.g. Margin left, this will override the equal margin on the left side

For details of each property, see Margin properties.

Float

Float - Float the element to the right or left of an element
Clear - Clear the float on the left or right of an element
Clearfix - Automatically clear child elements

For details of each property, see Float properties.

Position

Position - Select the way an element is positioned.

For details of each property, see P osition properties.

Display

Display - Select how an element is displayed
Visibility - Select the visibility of an element
Overflow - Select how the children of an element will overflow

For details of each property, see Display properties.

Opacity

Opacity - Set the opacity of an element.

For details of each property, see Opacity properties.

Box shadow

Type - Select between inner shadow and outer shadow
Horizontal - Set the horizontal length of the shadow
Vertical - Set the vertical length of the shadow
Blur - Set the blur of the shadow
Spread - Set the spread of the shadow
Color - Set the color of the shadow

For details of each property, see Box shadow properties.

Vertical alignment

Baseline - Align the baseline of the element with the baseline of the parent element. This is default
Top - Align the top of the element with the top of the tallest element on the line
Text top - Align the top of the element with the top of the parent element's font
Middle - Align the element the middle of the parent element
Bottom - Align the bottom of the element with the lowest element on the line
Text bottom - Align the bottom of the element with the bottom of the parent element's font
Subscript - Align the element as if it was subscript
Superscript - Align the element as if it was superscript
Length - Align the element by a specified length. Negative values are allowed

For details of each property, see Vertical alignment properties.