CSS Layout – The display Property

Welcome to The Coding College! The display property is one of the most important CSS properties for controlling how elements are visually rendered on a webpage. By mastering display, you can create layouts that are flexible, responsive, and visually appealing.

In this guide, we’ll dive into the various values of the display property, their uses, and examples to help you design better layouts.

What is the display Property?

The display property defines how an HTML element is displayed in the document. It determines whether the element acts as a block, inline, or something more complex (like flex or grid).

selector {
    display: value;
}

Common Values of the display Property

1. block

A block-level element occupies the full width of its parent container and starts on a new line.

Examples of Block Elements: <div>, <p>, <section>

<div style="display: block; background: #f0f0f0; padding: 10px;">
    I am a block element.
</div>
<div style="display: block; background: #ccc; padding: 10px;">
    I am another block element.
</div>

Output: Each <div> will appear on a new line, taking up the full width of its container.

2. inline

An inline element occupies only the width it needs and does not start on a new line.

Examples of Inline Elements: <span>, <a>, <strong>

<span style="display: inline; background: #f0f0f0;">I am inline</span>
<span style="display: inline; background: #ccc;">So am I</span>

Output: Both <span> elements will appear side by side.

3. inline-block

An inline-block element behaves like an inline element (does not start on a new line) but allows setting width, height, and margin.

<div style="display: inline-block; width: 100px; height: 50px; background: #f0f0f0;">
    I am inline-block
</div>
<div style="display: inline-block; width: 100px; height: 50px; background: #ccc;">
    So am I
</div>

Output: Both <div> elements will appear side by side, but you can control their dimensions.

4. none

An element with display: none is completely removed from the layout flow. It doesn’t occupy any space on the page.

<div style="display: none;">
    You won't see me!
</div>

Output: The <div> is hidden and doesn’t take up space.

5. flex

Flexbox is a powerful layout system for creating one-dimensional layouts (row or column).

<div style="display: flex; gap: 10px;">
    <div style="background: #f0f0f0; padding: 10px;">Item 1</div>
    <div style="background: #ccc; padding: 10px;">Item 2</div>
    <div style="background: #ddd; padding: 10px;">Item 3</div>
</div>

Output: The child elements are aligned in a row by default, and you can easily control spacing, alignment, and order.

6. grid

CSS Grid is ideal for two-dimensional layouts, allowing you to create rows and columns effortlessly.

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
    <div style="background: #f0f0f0; padding: 10px;">Item 1</div>
    <div style="background: #ccc; padding: 10px;">Item 2</div>
    <div style="background: #ddd; padding: 10px;">Item 3</div>
    <div style="background: #eee; padding: 10px;">Item 4</div>
</div>

Output: The child elements are displayed in a two-column layout.

7. table and Related Display Types

The display: table family allows you to mimic table behavior without using actual <table> tags.

• table: Acts like a table.
• table-row: Acts like a table row.
• table-cell: Acts like a table cell.

<div style="display: table; width: 100%;">
    <div style="display: table-row;">
        <div style="display: table-cell; padding: 10px; background: #f0f0f0;">Cell 1</div>
        <div style="display: table-cell; padding: 10px; background: #ccc;">Cell 2</div>
    </div>
</div>

Output: The <div> elements behave like a table.

Choosing the Right display Value

Example: Combining Multiple Display Types

<div style="display: flex; gap: 20px; align-items: center;">
    <div style="display: block; width: 200px; height: 100px; background: #f0f0f0;">
        Block Element
    </div>
    <div style="display: inline-block; width: 100px; height: 100px; background: #ccc;">
        Inline-Block
    </div>
    <div style="display: none;">
        Hidden Element
    </div>
</div>

Output: The layout combines block, inline-block, and none to create a clean, responsive interface.

Tips for Using display

1. Test Across Devices: Ensure your chosen display value works well on all screen sizes.
2. Use flex and grid: For modern layouts, these properties offer the most flexibility and ease of use.
3. Combine Properties: Pair display with other CSS properties like position, margin, and padding for precise control.

Conclusion

The display property is the foundation of CSS layout techniques. By understanding its values and how to use them effectively, you can create clean, responsive, and visually appealing web designs.

Explore more CSS tutorials and resources at The Coding College and take your web development skills to the next level!

Control your layouts, control your design!