CSS display properties determine how an element is displayed on a webpage. They control the layout and positioning of elements. There are several display properties available in CSS:
display: block;: This property makes an element a block-level element, which means it takes up the entire width of its parent container and starts on a new line. Block-level elements can have width, height, margins, and padding.
<div style="display: block;">This is a block-level element.</div>
display: inline;: This property makes an element an inline-level element, which means it does not start on a new line and only takes up as much width as necessary. Inline-level elements cannot have width, height, margins, or padding.
<span style="display: inline;">This is an inline-level element.</span>
display: inline-block;: This property combines the characteristics of both block-level and inline-level elements. It allows an element to have width, height, margins, and padding, while still staying inline with other elements.
<div style="display: inline-block;">This is an inline-block element.</div>
display: none;: This property hides an element completely. The element is not rendered on the webpage and does not take up any space.
<div style="display: none;">This element is hidden.</div>
display: flex;: This property enables a flexible box layout model. It allows elements to be arranged in a row or column, and provides powerful alignment and distribution capabilities.
<div style="display: flex;">This is a flex container.</div>
These are some of the commonly used display properties in CSS. They play a crucial role in controlling the visual appearance and behavior of elements on a webpage.