--- title: "Layout properties" date: "2017-11-11T12:35:01+00:00" summary: "Control element layout, position, and display with Site Studio's layout properties. Learn how to add and customize height, width, padding, margin, float, position, display, opacity, box shadow, and vertical alignment for your styles." image: type: "page" url: "/drupal-starter-kits/add-ons/site-studio/layout-properties" id: "87077c1f-bf0b-4628-b7c7-bb5d3e711d35" --- Table of contents will be added 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: 1. Navigate to the Style builder. This is available when you edit [Base styles](/drupal-starter-kits/add-ons/site-studio/creating-base-styles "Creating base styles") or [Custom styles](/drupal-starter-kits/add-ons/site-studio/creating-custom-styles "Creating custom styles"). For more, see [Using the style builder](/drupal-starter-kits/add-ons/site-studio/using-style-builder "Using the style builder") 2. Within the Style editor area, click on the **Properties** button 3. 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.](/drupal-starter-kits/add-ons/site-studio/height-properties "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.](/drupal-starter-kits/add-ons/site-studio/width-properties "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.](/drupal-starter-kits/add-ons/site-studio/padding-properties "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.](/drupal-starter-kits/add-ons/site-studio/margin-properties "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.](/drupal-starter-kits/add-ons/site-studio/float-properties "Float properties") Position -------- * **Position -** Select the way an element is positioned. For details of each property, see [P](https://sitestudiodocs.acquia.com/6.0/user-guide/padding-properties "Padding properties")[osition properties.](/drupal-starter-kits/add-ons/site-studio/position-properties "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.](/drupal-starter-kits/add-ons/site-studio/display-properties "Display properties") Opacity ------- * **Opacity -** Set the opacity of an element. For details of each property, see [Opacity properties.](/drupal-starter-kits/add-ons/site-studio/opacity-properties "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.](/drupal-starter-kits/add-ons/site-studio/box-shadow-properties "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.](/drupal-starter-kits/add-ons/site-studio/vertical-alignment-properties "Vertical alignment")