CSS Display Property

Block and Inline Elements

Every HTML element has a default display value. The two most common display values are block and inline.

• A block-level element always starts on a new line and takes up the full width available (e.g., <div>, <p>, <h1>).
• An inline element does not start on a new line and only takes up as much width as necessary (e.g., <span>, <a>, <img>).

You can change the default display value of any element.

Overriding Display Values

Changing an inline element to a block element, or vice versa, can be useful for achieving a certain layout.

li {
  display: inline;
}

display: none

display: none; is commonly used to hide and show elements without deleting them from the HTML. The element will be completely removed from the page layout.

h1.hidden {
  display: none;
}

display: inline-block

display: inline-block; is a hybrid. It allows you to set a width and height on the element (like a block element), but it does not add a line-break after the element, so it can sit next to other elements (like an inline element).

span.box {
  display: inline-block;
  width: 100px;
  height: 50px;
  border: 1px solid black;
}