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
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
Site Studio