The CSS Display Property – Display-Block, Inline-Block, None

• display: block :
• display: inline-block:
• display: none:

In CSS (Cascading Style Sheets), the display property is used to control how an HTML element is rendered on a web page. There are several possible values for the display property, including block, inline-block, and none. Each of these values affects how the element is positioned and how it interacts with other elements on the page. Here’s an overview of these three values:

¶display: block :

• Elements with display: block are rendered as block-level elements. They typically start on a new line and take up the full available width of their containing element. Common examples of block-level elements include <div>, <p>, and <h1>.
• Block-level elements can have width and height specified and can also have margins, padding, and borders.
• Block-level elements create a “block formatting context,” which means they stack on top of each other vertically by default.

¶display: inline-block:

• Elements with display: inline-block are a hybrid between block-level and inline elements. They are inline with the text flow but can have width, height, margins, padding, and borders, just like block-level elements.
• Inline-block elements do not start on a new line, and they can sit next to other elements horizontally, just like inline elements, but they can have block-level styling properties.
• This is often used for creating elements like buttons or navigation menus that need to be inline but have some block-level properties.

¶display: none:

• Elements with display: none are not rendered on the page at all. They are completely hidden and do not take up any space.
• This is commonly used to hide or remove elements from the page dynamically using JavaScript or for hiding elements that should not be visible until a certain condition is met.
• Elements with display: none are not accessible or interactable by the user. Here’s an example of how you might use these display values in CSS:

/* Block-level element */
.block-element {
  display: block;
  width: 200px;
  height: 100px;
  margin: 10px;
  padding: 5px;
  border: 1px solid #000;
}

/* Inline-block element */
.inline-block-element {
  display: inline-block;
  width: 150px;
  height: 50px;
  margin: 5px;
  padding: 3px;
  border: 1px solid #333;
}

/* Hide an element */
.hidden-element {
  display: none;
}