MakeW3web

Display types

In CSS, the `display` property determines how an element should be rendered on a web page. There are three main display types: `block`, `inline`, and `inline-block`.

Block Elements

Block elements take up the entire width of their container and create a new line before and after the element. They can have width and height set and can contain other block and inline elements. Here are some examples of block elements:

  • `<div>`
  • `<p>`
  • `<h1>` - `<h6>`
  • `<ul>`
  • `<ol>`
  • `<form>`

Inline Elements

Inline elements do not create a new line before or after themselves and only take up as much width as needed to display their content. They cannot have width or height set and cannot contain other block elements. Here are some examples of inline elements:

  • `<span>`
  • `<a>`
  • `<em>`
  • `<strong>`
  • `<img>`

Inline-Block Elements

Inline-block elements are a combination of block and inline elements. They take up as much width as needed to display their content, like inline elements, but can have width and height set, like block elements. They can also contain other inline or inline-block elements. Here are some examples of inline-block elements:

  • `<button>`
  • `<input>`
  • `<textarea>`
  • `<select>`

To change the display type of an element, you can use the `display` property in your CSS. For example, to make a `<div>` element behave like an inline-block element, you can add the following rule:

div {
  display: inline-block;
}

I hope this explanation helps you understand the differences between block, inline, and inline-block display types in CSS!

Was this page helpful?