CSS DISPLAY PROPERTY

on

CSS display property - Detailed Explanation 

The CSS display property is one of the most important CSS properties. It controls how an HTML element is displayed and how it behaves in the page layout.

Basic Syntax

selector {
    display: value;
}

Example:

div {
    display: block;
}

1. display: block

A block-level element starts on a new line and normally takes the full available width.

.box {
    display: block;
    width: 300px;
    height: 100px;
}

HTML:

<div class="box">Hello World</div>

Common block elements:

  • <div>
  • <p>
  • <h1> to <h6>
  • <section>
  • <header>
  • <footer>

Example:

Box 1
----------------
Box 2
----------------
Box 3
----------------

Each block appears on a separate line.

2. display: inline

An inline element stays on the same line as surrounding content.

span {
    display: inline;
}

HTML:

<span>Hello</span>
<span>World</span>

Output:

Hello World

Common inline elements:

  • <span>
  • <a>
  • <strong>
  • <em>

One important point: width and height generally don't work as expected on normal inline elements.

3. display: inline-block

inline-block combines features of both inline and block.

The elements can appear on the same line, while allowing you to set:

  • width
  • height
  • padding
  • margin

Example:

.box {
    display: inline-block;
    width: 150px;
    height: 100px;
    margin: 10px;
}

HTML:

<div class="box">Box 1</div>
<div class="box">Box 2</div>

The boxes can appear next to each other.

4. display: none

This completely hides an element and removes its space from the page.

.menu {
    display: none;
}

HTML:

<div class="menu">Menu</div>

The menu will not appear, and other elements will move into its place.

This is commonly used with:

  • Mobile menus
  • JavaScript show/hide functions
  • Popup elements
  • Responsive designs

5. display: flex

flex is used to create flexible layouts.

.container {
    display: flex;
}

Example:

<div class="container">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
</div>

CSS:

.container {
    display: flex;
    gap: 20px;
}

The boxes will normally appear horizontally:

[Box 1]   [Box 2]   [Box 3]

You can also control alignment:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

6. display: grid

grid is useful for creating rows and columns.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

Example layout:

[Box 1] [Box 2] [Box 3]

[Box 4] [Box 5] [Box 6]

CSS Grid is especially useful for:

  • Website layouts
  • Product cards
  • Image galleries
  • Dashboards
  • Blog layouts

7. display: table

This makes an element behave similarly to a table.

.container {
    display: table;
}

It is less commonly used today because Flexbox and Grid are usually better choices for modern layouts.

8. display: list-item

This makes an element behave like a list item.

.item {
    display: list-item;
}

It can generate a list marker depending on the surrounding styles.

9. display: contents

With display: contents, the element's own box is removed, but its children remain part of the layout.

.container {
    display: contents;
}

This is an advanced value and should be used carefully.

display: none vs visibility: hidden

This is an important difference.

display: none

.box {
    display: none;
}

The element is hidden and its space is removed.

visibility: hidden

.box {
    visibility: hidden;
}

The element is invisible, but its space remains.

display: none:

[Box 1] [Box 3]


visibility: hidden:

[Box 1] [      ] [Box 3]
             ↑
          space remains

Quick Comparison

Value    Main Purpose
block    Element appears on a new line
inline    Element stays in the same line
inline-block    Inline element with width/height
flex    One-dimensional flexible layout
grid    Rows and columns layout
none    Hide and remove element from layout
table    Table-like behavior
list-item    List-item behavior
contents    Remove element's own box

Simple Example

.box1 {
    display: block;
}

.box2 {
    display: inline;
}

.box3 {
    display: inline-block;
}

.box4 {
    display: flex;
}

.box5 {
    display: grid;
}

.box6 {
    display: none;
}

In modern CSS, the most important display values to learn first are:
block, inline, inline-block, flex, grid, and none.

Comments

Post a Comment