CSS Display

What is CSS Display?

The CSS display property determines how an HTML element is displayed on a webpage. It controls whether an element appears as a block, inline, inline-block, flex container, grid container, or is hidden. Understanding the display property is essential for creating layouts, navigation bars, image galleries, and responsive webpages.

Why Use CSS Display?

The display property helps organize webpage elements and create flexible layouts. It allows developers to change how elements behave without modifying the HTML structure, making webpage design easier and more responsive.

Common Display Values

block

Starts on a new line and takes full width.

Div, section, headings

inline

Stays on the same line and uses only needed width.

Span, links

inline-block

Inline element that accepts width and height.

Buttons, cards

flex

Creates a flexible layout container.

Navigation, layouts

grid

Creates a grid layout.

Responsive designs

none

Hides the element completely.

Hide menus, sections

Basic Display Syntax

<!DOCTYPE html>
<html>

<head>

<style>

.box{

    display:block;

}

</style>

</head>

<body>

<div class="box">

Display Example

</div>

</body>

</html>

Step 1: Using display: block

Block elements always start on a new line and occupy the full available width of their parent container.

<!DOCTYPE html>
<html>

<head>

<style>

.box{

    display:block;

    background:#007BFF;

    color:white;

    padding:15px;

    margin-bottom:10px;

}

</style>

</head>

<body>

<div class="box">First Box</div>

<div class="box">Second Box</div>

</body>

</html>

Step 2: Using display: inline

Inline elements stay on the same line and only use the width required for their content.

<!DOCTYPE html>
<html>

<head>

<style>

span{

    display:inline;

    background:#28a745;

    color:white;

    padding:8px;

}

</style>

</head>

<body>

<span>HTML</span>

<span>CSS</span>

<span>JavaScript</span>

</body>

</html>

Step 3: Using display: inline-block

Inline-block elements remain on the same line while allowing custom width and height.

<!DOCTYPE html>
<html>

<head>

<style>

.box{

    display:inline-block;

    width:120px;

    height:80px;

    background:#ff9800;

    color:white;

    text-align:center;

    line-height:80px;

    margin:5px;

}

</style>

</head>

<body>

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

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

<div class="box">Box 3</div>

</body>

</html>

Step 4: Using display: flex

Flexbox arranges child elements in rows or columns, making layouts easier to create and responsive.

<!DOCTYPE html>
<html>

<head>

<style>

.container{

    display:flex;

    gap:10px;

}

.box{

    background:#6f42c1;

    color:white;

    padding:20px;

    flex:1;

}

</style>

</head>

<body>

<div class="container">

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

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

<div class="box">3</div>

</div>

</body>

</html>

Step 5: Using display: grid

CSS Grid creates rows and columns for arranging elements in a structured layout.

<!DOCTYPE html>
<html>

<head>

<style>

.container{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px;

}

.box{

    background:#dc3545;

    color:white;

    padding:20px;

    text-align:center;

}

</style>

</head>

<body>

<div class="container">

<div class="box">A</div>

<div class="box">B</div>

<div class="box">C</div>

</div>

</body>

</html>

Step 6: Using display: none

The display:none value completely removes an element from the webpage layout.

<!DOCTYPE html>
<html>

<head>

<style>

.hide{

    display:none;

}

.show{

    background:#007BFF;

    color:white;

    padding:15px;

}

</style>

</head>

<body>

<div class="hide">

You cannot see this.

</div>

<div class="show">

This element is visible.

</div>

</body>

</html>

Complete CSS Display Example

<!DOCTYPE html>
<html>

<head>

<style>

body{

    font-family:Arial;

}

.menu{

    display:flex;

    gap:10px;

}

.item{

    background:#007BFF;

    color:white;

    padding:15px 20px;

    border-radius:5px;

}

.item:hover{

    background:#0056b3;

}

</style>

</head>

<body>

<h2>Navigation Menu</h2>

<div class="menu">

<div class="item">Home</div>

<div class="item">About</div>

<div class="item">Services</div>

<div class="item">Contact</div>

</div>

</body>

</html>

Advantages of CSS Display

Flexible Layouts

Easy Design

Creates modern webpage layouts.

Responsive

Works on All Devices

Adapts layouts for different screen sizes.

Simple Control

Better Organization

Controls how elements appear on a page.

Modern CSS

Professional Websites

Supports Flexbox and Grid layouts.

Best Practices

Use block for sections and containers.
Use inline for short text elements.
Use inline-block when width and height are needed.
Use flex for one-dimensional layouts.
Use grid for two-dimensional layouts.
Use display:none only when an element should be removed from the layout.
Choose the display value based on the layout requirement.
Test layouts on desktop, tablet, and mobile devices.

Web Resources on CSS Display

1. MDN Web Docs : display CSS property
2. MDN Web Docs : CSS display
3. Dev.to : CSS Display property

🧪 Test Your CSS Code

Edit the CSS code on the left and click “Run Code” to see the result on the right.

📝 CSS Code

👁️ Preview (HTML rendered with your CSS)

Click “Run Code” to see the result here.