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.

 

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.

 

Troubleshooting — Whitespace & Inline-Block Elements

A common problem when using inline-block elements is that whitespace in HTML becomes visual space in the site design (similar to having space between words). 

The only way to 100% resolve this problem is to have no space between elements in the HTML markup (this is what we do with published sites in Webflow). The problem with this solution is that the markup becomes difficult to work with and isn’t very “pretty”. 

If you’re experiencing design inconsistencies between your published site and your exported site there are a few workarounds available that can help:

  • Export minified code: From the export modal in the Designer, use the keyboard shortcut [ctrl+o] to activate advanced exporting options.
  • Publish minified code: From the Hosting tab in your Site Settings, scroll down to the Publishing Options section and uncheck Beautify HTML and 
  • Use floats instead: Try floating the elements instead. If you need to center them, wrap them in a Div Block that is set to Display: Inline Block.
  • Add negative margin: Add a small amount of negative left/right margin to any inline-block elements that cause trouble to cancel out the added space.
  • Set font size to zero: Set the parent elemen's font size: 0px and hard-set the inline-block element to the correct font-size.

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.