Display Property

The CSS display property determines how an element on a web page is displayed on the screen.

The display property can have various values, each defining a different layout for HTML elements.

When you apply display: block;, the element is treated as a block-level element.

Block-level elements always start a new line and appear on the next line after the preceding content ends.

By default, block-level elements take up the full width of their parent container.

If the element's width is not explicitly set, it will stretch to occupy all the horizontal space available in its parent element.

• Examples: <div>, <p>, <h1>~<h6>, and others.

Copy
div {
  display: block;
}

When you use display: inline;, the element is treated as an inline element.

Inline elements sit alongside content on the same line and only take up as much space as their content requires.

Thus, you cannot set width or height on inline elements directly, and top/bottom margins have no effect.

• Examples: <span>, <a>, <strong>, and others.

inline-block combines properties of both inline and block.

This means the element will behave like an inline element without breaking to the next line, but allows for setting width and height like a block element.

It is particularly useful for elements like custom buttons or icons.

An element with display: none will not be visible on the web page.

Additionally, this element will not impact the document's layout, behaving as if it has been completely removed from the HTML source code.

Unlike visibility: hidden;, display: none removes the element's space as well.

This is often used with JavaScript to show or hide elements based on certain conditions.

Here is an example code using display property.

Copy
<div>Block Element</div>
<span>Inline Element</span>
<span class="hidden">This will not be displayed</span>
<button>Inline-Block Button</button>

Copy
div {
  display: block;
  background-color: lightblue;
}

span {
  display: inline;
  background-color: lightyellow;
}

.hidden {
  display: none;
}

button {
  display: inline-block;
  background-color: lightgreen;
}

The div element is a block element with a lightblue background, taking the full width of the screen.

The span elements are inline with a lightyellow background, starting amid the content line, while the span element with the .hidden class is not displayed on the screen.

The button element is an inline-block element with a lightgreen background, starting in the middle of the line while having its own height and width.

Follow the highlighted parts of the code to practice typing it out.