Layout settings

There are several different layout controls in the Style panel that allow you to control the positioning and behavior of elements. In this introduction, we’ll provide an overview of each layout control in the Style panel, including links to more detailed articles about each.

In this lesson

1. Display settings
2. Spacing
3. Size
4. Overflow
5. Position layouts
6. Transform effects

Display settings

Display settings determine how an element is displayed within the document flow. All elements come with a default display layout you can update in the display settings in the Style panel.

Certain display layouts are disabled for some elements to preserve the functionality of the component.

There are 6 display options:

1. Block: the default display setting for most elements. Each block element starts on a new line and takes up the full width of its parent element unless a custom width is set.
2. Flex: elements with a flex layout arrange their direct children horizontally or vertically.
3. Grid: elements in a grid layout arrange their direct children across multiple columns and rows.
4. Inline-block: inline-block elements are stacked side-by-side and their width is determined by the content inside.
5. Inline: the default display setting for any text content inside an element. You can change the layout of an inline element by changing its margins and padding but you cannot change its width or height.
6. None: hides an element completely.

Learn more about each of the display settings.

Spacing

Margin and padding let you create space inside or outside of an element's boundary. Padding controls the space between an element's content and its boundary, while margin creates space outside the element.

Margins and paddings make it possible to create responsive websites whose content reflows while creating consistent spacing.

Learn more about spacing.

Size

How tall or wide an element is depends on what values you set for the width or height properties. These dimensions can be fixed values with units like pixels(px) or relative values with units like percent(%).

In the size settings, you can also specify minimum and maximum values for width and height. Minimum values allow the element to grow as much as it needs to without shrinking below the minimum. Maximum values allow the element to grow up until the maximum value.

The default value for width and height is “auto” which allows the element to expand and grow larger when the content inside increases. Content in elements with a fixed height may overflow their container.

Learn more about setting the size of elements.

Overflow

By default, content will overflow — spill outside — of an element’s boundaries when it goes beyond the set size. You can specify whether to hide the overflowing content or to add scrollbars to the element with the fixed dimensions.

Learn more about overflow.

Position layouts

Position settings allow you to reposition elements within the document flow.

Here, you can change the position, float, and clear settings.

Position

The position property lets you reposition elements based on their current location, their parent's dimensions, or the dimensions of the viewport (i.e., the browser window's).

Float and clear

Float and clear let you reposition an element relative to the position of their adjacent element.

Float is great for wrapping text around an element, like when text wraps around an image in a magazine layout. Floating multiple elements will align them side by side.

Setting clear on an element will make sure it does not wrap around a floating element.

Learn all about positioning elements.

Transform effects

Last but not least, you can apply a 2D or 3D effect on any element without changing the actual element’s dimensions or affecting the document flow. Transforms such as translate or move, scale, rotate, and skew allow you to control how an element appears and transforms in various states and when a user interacts with your element.

Learn more about:

• Transforms
• States
• Transitions