The Style Panel gives you several layout controls to help you position content in your project. In many cases, there are multiple ways to go about building the same layout, but some may provide more predictable results than others. Here are the layout methods we will discuss:

  • Block
  • Inline-block
  • Inline
  • Flex
  • Float
  • Positioning
  • Overflow
  • Transform
  • Padding and margin

Block

Block elements stack on top of each other and push nearby elements to the next line. They also take up the full width of their parent, unless a custom width is set. Block elements will not lay out side by side, even if they are given smaller widths. For laying elements next to one another, you'll need to use inline-block, flex, or float

 

Learn more about block and other display settings.

Inline-block

Inline-block elements will sit next to one another on the same line, wrapping when they hit the inner boundary of their parent element. They're as wide as the content inside of them, unless a custom width is set. Images and buttons are set to inline-block by default.

Learn more about inline-block and other display settings.

Inline

Inline elements behave like text content. They have no width or height — their dimensions are determined by typographic styles like font size, line height, and letter spacing.

 

Learn more about inline and other display settings.

Flex

Flex (also known as flexbox) is a powerful layout tool that allows you to align, stretch, size and stack items inside a container.

 

Learn more about Flexbox and how to use it.

Floats

When an element is set to float, any text elements underneath will wrap around it. Historically, floats have been used to array elements next to each other, but today this can be done more effectively using flexbox.

 

Learn more about floats.

Positioning

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

 

Relative lets you adjust the positioning of an element without moving the surrounding content.

Absolute allows you to move an element around its parent element without messing with the flow of existing elements.

Fixed lets you fix an element to a specific position in the viewport, so it scrolls along with the visitor.

Learn more about relative, absolute, and fixed positioning.

Overflow

Elements usually grow larger when the content inside them increases, but some elements have a set width and height. Overflow gives you control over whether content inside an element is allowed to spill outside of its boundaries when it goes beyond the set width/height.

 

Learn more about overflow.

Transform

This setting lets you move, rotate, scale, or skew content without changing the actual element’s dimensions or affecting the document flow. Transforms are great for making 2D and 3D animations and interactions.

 

Learn more on how to use transforms.

Margin and padding

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.

 

Learn more about margin and padding.