CSS Display Property (Block, Inline, Inline-Block)

Introduction

The display property controls how elements appear on a webpage. Understanding block, inline, and inline-block display types is crucial for layout design.

1. Block-Level Elements

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

Examples:

• <div>
• <p>
• <h1> to <h6>

Styling Example:

div {
    display: block;
    width: 50%;
    background-color: lightgray;
}

2. Inline Elements

Inline elements do not start on a new line and only take up as much width as necessary.

Examples:

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

Styling Example:

span {
    display: inline;
    color: red;
}

3. Inline-Block Elements

inline-block elements behave like inline elements but allow setting width and height.

Example:

div {
    display: inline-block;
    width: 150px;
    height: 50px;
    background-color: yellow;
}

4. Comparing Display Types

5. Changing Default Display Behavior

Elements have default display values, but they can be changed.

span {
    display: block;
}

Conclusion

Understanding block, inline, and inline-block helps create flexible layouts. Proper use ensures better control over webpage structure.