The display setting determines the fundamental layout behavior of an element. Elements can either stack on top of each other or stack side by side, depending on what display setting is used. The beauty is that you can change the display of any element. 

In this lesson
  • Block
  • Inline-block
  • Inline
  • Flex
  • None

Block

Most elements in the Elements Panel have a default display of block. Each block element starts on a new line and takes up 100% of the width of its parent element. All elements except for link blocks, buttons, text links, and images have a default display of block.

 

You can add a specific width to a block element, but by default, they will always push the next element down.

 

Inline Block

Inline-block elements stack side by side and their width is determined by the content inside. For example, if a button has the text “Click me!” and 10px of left and right padding, the width of the button will equal the content’s width plus the padding width.  

The only elements that are inline-block by default are images, buttons, and link blocks.

Similar to how text wraps when it reaches the end of a line, inline-block elements will also  wrap when the they hit the boundaries of their parent element.

 

Inline block elements also react to text alignment settings set on a parent element. For example, if you set a parent element to align the text to center, all the inline block elements within will also center.

 

Inline

Inline is the default display setting for text content inside of any element. It can have no width or height, besides font properties, and it just flows with the text.

Bolding, italicizing, linking, or wrapping text with a span will create an element that’s inline by default. The text link element is the only element in the Elements Panel that has a display of inline.

You can change the layout of an inline element by changing the padding, and left/right margin. But to add a width and height you’ll need to set the display to inline-block.

 

Flex

Flex (also known as flexbox) is a very powerful display setting that’s made for building complex layouts and aligning elements. Unlike the other display settings, applying flex on an element doesn’t do anything to the element itself—it affects the children of the element.

Learn more about how to use flex or check out the flexbox game.

 

None

This lets you completely hide an element from the page. It won’t just make the element invisible, like setting the opacity to 0%—the browser will render the page as if that element doesn’t exist.

 

When setting an element’s display to none it’s not uncommon to lose track of it since it disappears from the page. You can use the Navigator to select the element, then go back to the Style Panel to change the display setting.