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 Position 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.

Layout properties

• 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 Position 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.