CSS Display

Every HTML element has a default display value. The display property changes how an element is rendered on the page.

Common Display Values

• block
• inline
• inline-block
• none
• flex
• grid

div{

    display:block;

}

A block element always starts on a new line and occupies the full available width by default.

div{

    display:block;

}

p{

    display:block;

}

Inline elements do not start on a new line. They occupy only the width required by their content.

span{

    display:inline;

}

a{

    display:inline;

}

The inline-block value combines the characteristics of both inline and block elements. It allows elements to stay on the same line while accepting width and height.

.box{

    display:inline-block;

    width:150px;

    height:80px;

}

The display: none; property completely hides an element from the webpage. The hidden element occupies no space in the layout.

.hide{

    display:none;

}

button:hover + p{

    display:block;

}

The display: flex; property creates a flexible layout where child elements are arranged in a row or column. Flexbox makes it easy to align and distribute space between items.

.container{

    display:flex;

}

.container{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

}

The display: grid; property creates a two-dimensional layout with rows and columns.

.container{

    display:grid;

    grid-template-columns:1fr 1fr 1fr;

}

.container{

    display:grid;

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

    gap:15px;

}

Both properties hide elements, but they behave differently.

.box1{

    visibility:hidden;

}

.box2{

    display:none;

}

You can change the display value dynamically using CSS pseudo-classes or JavaScript to create interactive webpages.

.menu{

    display:none;

}

.menu:hover{

    display:block;

}

.box{

    display:inline-block;

}

@media(max-width:768px){

    .box{

        display:block;

    }

}

Example 1: Flex Layout

.container{

    display:flex;

    gap:20px;

}

Example 2: Grid Layout

.gallery{

    display:grid;

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

}

Example 3: Hide an Element

.notice{

    display:none;

}

Example 4: Inline Block Buttons

.btn{

    display:inline-block;

    padding:10px 20px;

}

Using the appropriate display value makes your webpage more organized, responsive, and easier to maintain.

• Use display:block; for sections and containers.
• Use display:inline; for small text elements.
• Use display:inline-block; for buttons and navigation items.
• Use display:flex; for one-dimensional layouts.
• Use display:grid; for two-dimensional layouts.
• Use display:none; only when elements should be completely hidden.
• Prefer Flexbox or Grid instead of using excessive floats.
• Test layouts on desktop, tablet, and mobile devices.

❌ Incorrect

span{

    display:block;

}

✔ Better

span{

    display:inline;

}

CSS display properties such as block, inline, flex, and grid are supported by all modern browsers.

1. What is the purpose of the CSS display property?
2. What is the difference between block and inline elements?
3. What is display:inline-block?
4. What does display:none do?
5. What is the difference between display:none and visibility:hidden?
6. When should you use display:flex?
7. When should you use display:grid?
8. Why is Flexbox preferred for modern layouts?
9. How do you change the display property using CSS?
10. Which display value removes an element from the document flow?

In this lesson, you learned:

• ✔ Introduction to CSS Display.
• ✔ Block Elements.
• ✔ Inline Elements.
• ✔ display: inline-block.
• ✔ display: none.
• ✔ display: flex.
• ✔ display: grid.
• ✔ visibility: hidden vs display: none.
• ✔ Changing Display Property.
• ✔ Practical Display Examples.
• ✔ Best Practices and Common Mistakes.