CSS Display

Home / CSS / CSS Display

CSS Display

CSS Display:

In CSS, the display property is used to control how an HTML element should be displayed on a web page. This property determines the type of box that an element generates and how it interacts with other elements in the document flow. Here are some of the most common values for the display property:

block:

Elements with display: block; create a block-level box. They typically start on a new line and stretch to fill the available width of their parent container. Examples include <div>, <p>, and <h1> elements.


<style>
    div {
      display: block;
    }
  </style>

inline:

Elements with display: inline; generate an inline-level box. They flow within the content of a block-level element and do not start on a new line. Examples include <span>, <a>, and <strong> elements.

<style>
    span {
      display: inline;
    }
  </style>

inline-block:

Elements with display: inline-block; combine aspects of both block and inline. They create an inline-level box that can have block-level properties like width and height. This is useful for creating elements that sit next to each other horizontally.

<style>
    button {
      display: inline-block;
      width: 100px;
      height: 30px;
    }
  </style>

none:

Elements with display: none; are not displayed on the page at all. They are effectively removed from the document flow and do not take up any space. This property is often used in JavaScript to hide and show elements dynamically.

<style>
    .hidden-element {
      display: none;
    }
  </style>

table:

Elements with display: table; create a block-level container that behaves like a table element. It can have child elements with display: table-row, display: table-cell, and other similar values to mimic the behavior of an HTML table.


 <style>
    .table-container {
      display: table;
    }

    .table-row {
      display: table-row;
    }

    .table-cell {
      display: table-cell;
    }
  </style>

flex:

Elements with display: flex; create a flex container. This enables flexible layout options for their child elements, allowing them to adjust their size and position within the container.

<style>
    .flex-container {
      display: flex;
      justify-content: space-between;
    }
  </style>

grid:

Elements with display: grid; create a grid container. This property allows for more advanced two-dimensional layout options, where child elements can be placed in rows and columns.


<style>
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
    }
  </style>

list-item:

Elements with display: list-item; behave like list items in an ordered (<ol>) or unordered (<ul>) list. This is often used to style elements that aren't part of a traditional list but should have list item markers.

 
<style>
    .menu-item {
      display: list-item;
      list-style: square;
    }
  </style>