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.