CSS Display

The CSS display property is used to specify the type of display box an element should generate. It determines how an element is laid out on the webpage. There are a variety of display values that you can use to control the layout of your webpage.

Inline vs. Block Elements

Before diving into the various display values, it's important to understand the difference between inline and block elements. Block-level elements always start on a new line and take up the full width available. Examples of block-level elements include <div>, <p>, and <h1> to <h6>. Inline elements, on the other hand, do not start on a new line and only take up as much width as necessary. Examples of inline elements include <span>, <a>, and <strong>.

With css you can force inline elements to behave like block elements and vice-versa. using the css propertie display:block and display:inline

Common Display Values

Value	Description
`none`	The element is completely removed from the layout and does not take up any space.
`block`	The element generates a block-level element box.
`inline`	The element generates an inline element box.
`inline-block`	The element generates a block box that behaves like an inline element.

Example:

Consider the following HTML code:


<div id="box">
  <p>Hello, World!</p>
</div>

To make the <div> element behave like an inline element, you can use the display property in your CSS:


#box {
  display: inline;
}

Now, the <div> will behave like an inline element and will not start on a new line.

These are just a few examples of how the display property can be used to control the layout of elements on a webpage. Experiment with different values to see how they affect the layout of your webpage!