CSS Display

What is CSS Display?

The CSS display property defines how an HTML element is shown on the page. It controls whether elements appear in a new line, the same line, or not appear at all.

Understanding display is extremely important because it affects layout, alignment, spacing, and responsiveness.

Common Display Values

• block
• inline
• inline-block
• none
• flex (advanced)

display: block

Block elements always start on a new line and take up the full width available.

• Starts on a new line
• Takes full width
• Width & height can be set

div {
    display: block;
    background: #2563eb;
    color: white;
    padding: 10px;
}

display: inline

Inline elements stay in the same line and only take as much width as needed.

• Does not start a new line
• Width & height do not work
• Flows with text

span {
    display: inline;
    color: red;
}

display: inline-block

Inline-block is a mix of inline and block. Elements stay in the same line but allow width and height.

• Stays inline
• Width & height work
• Very useful for buttons & cards

.button {
    display: inline-block;
    width: 120px;
    padding: 10px;
    background: #1e40af;
    color: white;
}

display: none

The element is completely removed from the page. It does not take any space.

.hidden {
    display: none;
}

display: none vs visibility: hidden

• display: none → removes element completely
• visibility: hidden → hides but keeps space

.box1 {
    display: none;
}

.box2 {
    visibility: hidden;
}

display: flex (Introduction)

Flexbox is used for modern layouts. It makes alignment easy and responsive.

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

Best Practices for CSS Display

• Use block for layout sections
• Use inline-block for buttons
• Avoid unnecessary display changes
• Use flex for modern layouts