CSS Display span display property Block inline inline-block

In CSS, the display property is used to define how an element should be displayed on a web page. It controls the behavior and layout of the element.

1. Block: The display: block value is used to make an element a block-level element. Block-level elements occupy the entire width of their parent container by default and create a new line before and after the element. Examples of block-level elements include <div>, <p>, <h1> to <h6>, and <ul>.

2. Inline: The display: inline value is used to make an element an inline-level element. Inline-level elements do not create line breaks and only take up the necessary space for their content. Examples of inline-level elements include <span>, <a>, <strong> and <em> Inline-level elements cannot have width or height specified.

3. Inline-Block: The display: inline-block value is a combination of both inline and block. Inline-block elements are laid out as inline elements, allowing them to sit alongside other elements on the same line, but they can also have width, height, padding, and margins applied to them. It's commonly used when you want elements to have block-level properties while still being part of the normal flow of text. An example of an inline-block element is <img>.

It's important to note that the display property can have other values as well, such as none (which hides the element) or flex (which enables flexible box layout), among others. Different display values have different effects on how elements are rendered and interact with other elements on the page.

The display property allows you to control the layout and behavior of elements, and choosing the appropriate value helps achieve the desired visual and structural effect for your web page.