Display property

Display property

Display properties operate like instructions that tell a browser how to display the different parts of a webpage. You can customize an element’s appearance and layout by changing its display property.

Here are some of the most common values for display properties in CSS:

  • Block — The element starts on a new line and takes up the full width of its parent container unless you set a custom width
  • Inline — The element doesn’t start on a new line and takes up only as much width as its content requires
  • Inline block — The element generates a block-level box but allows inline elements to flow around it
  • Flex — The element generates a flexbox (ideal for responsive layouts)
  • Grid — The element generates a grid container (ideal for layouts with rows or columns)
  • None — The element isn’t visible

If you’re used to working with drag-and-drop design tools, manually adjusting display settings may require a bit of trial and error. Visit our Webflow University course on CSS layout and positioning to learn more.

Other glossary terms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more