Display Properties

The CSS display property determines how an element on a webpage will be displayed on the screen.

The display property can have various values as shown below, with each one defining the box type and layout behavior of the HTML element in a different way.

• block: The element extends to the full width of its parent element, essentially having width: 100%. It always starts on a new line.

• inline: Inline elements do not start on a new line. They only take up as much width as needed and can begin or end in the middle of a line.

• none: The element is not displayed on the screen.

• inline-block: Combines features of both inline and block. The element takes up only as much width as its content, but can have a specified width and height like a block element.

1. display: block;

Using display: block; treats the element as a block-level element. Block-level elements always start on a new line, and after the previous element ends, the block-level element is rendered on the next line.

By default, block-level elements take up the full width of their parent element. If the width of the element is not explicitly set, the block element will extend to occupy the entire horizontal space of the parent element.

• Example: <div>, <p>, <h1> to <h6>, etc.

Copy
div {
  display: block;
}

2. display: inline;

Using display: inline; treats the element as an inline element.

Inline elements are arranged alongside their surrounding content within a line, and they occupy only as much width as necessary. This means you cannot directly set the width or height of an inline element.

Moreover, top and bottom margins do not affect it.

• Example: <span>, <a>, <strong>, etc.

Copy
span {
  display: inline;
}

3. display: inline-block;

inline-block has characteristics of both inline and block. This means that an element will be displayed inline without starting a new line, but you can set the width and height of the element like a block element.

• Example: Useful for custom buttons or icon elements.

Copy
.icon {
  display: inline-block;
}

4. display: none;

Elements set to display: none are completely hidden from the web page. Furthermore, such elements do not affect the document's layout, acting as if they were removed from the HTML source code. Unlike visibility: hidden;, display: none removes the allocated space of the element as well.

• Example: Typically used when toggling element visibility with scripts based on certain conditions.

Copy
.hidden {
  display: none;
}

Below is an example of using the 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 up the entire width of the screen.

The span element is an inline element with a lightyellow background, starting in the middle of the line, while the span element with the .hidden class is not visible on the screen.

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

Follow the highlighted code parts and try to implement them yourself.