CSS Display – Controlling the Layout Behavior of Elements

In this article, we’ll discuss one of the most important CSS properties: display. The display property controls the layout behavior of elements, determining how they are rendered in relation to each other on the page.

1. Understanding the display Property

The display property defines how an element should behave in the layout. It controls whether the element appears as a block-level element, inline element, or neither.

Basic Syntax:

element {
    display: value;
}        

2. Common Display Values

Here are some of the most commonly used display values and how they affect elements:

• block: The element is rendered as a block-level element, taking up the full width of its container, and starting on a new line.
• inline: The element is rendered inline, meaning it only takes up as much width as needed and stays on the same line with other elements.
• inline-block: Combines the characteristics of both inline and block. The element behaves like an inline element, but you can set width and height like a block-level element.
• none: The element is hidden and doesn't take up any space on the page.

Example:

<div class="block-item">Block Element</div>
<span class="inline-item">Inline Element</span>
<div class="inline-block-item">Inline-Block Element</div>        

.block-item {
    display: block;
    background-color: #4CAF50;
    margin-bottom: 10px;
}

.inline-item {
    display: inline;
    background-color: #FF5722;
}

.inline-block-item {
    display: inline-block;
    background-color: #2196F3;
    padding: 10px;
}
        

In this example:

• The block-item will take up the full width of its container and start on a new line.
• The inline-item will stay in line with other elements.
• The inline-block-item behaves like an inline element but allows for block-level styling like width, height, and padding.

3. Block vs. Inline Elements

Block elements (like <div>, <h1>, <p>, etc.) naturally take up the full width of their container and start on a new line. You can control their width, height, margins, and padding.

Inline elements (like <span>, <a>, <strong>, etc.) only take up as much space as necessary and stay in the flow of the text. You cannot set width or height for inline elements.

4. Inline-Block: Best of Both Worlds

The inline-block value combines the benefits of both inline and block elements. You can place elements in the same line while still controlling their width and height.

Example:

.hidden-box {
    display: none;
}        

This can be useful for creating toggles or for elements that should be visible based on certain conditions.

6. Other Display Values

There are other display values for more advanced layouts, such as:

• flex: Turns an element into a flexible container, allowing more control over its children (we'll discuss this in detail in a later lecture).
• grid: Enables grid layout for a container, allowing child elements to be arranged in rows and columns (also covered in a future lecture).

7. Practical Example:

Here’s a practical example using block, inline, and inline-block together:

<div class="block-item">This is a block element.</div>
<span class="inline-item">This is an inline element.</span>
<div class="inline-block-item">This is an inline-block element.</div>        

.block-item {
    display: block;
    width: 100%;
    background-color: #4CAF50;
    color: white;
}

.inline-item {
    display: inline;
    background-color: #FF5722;
    padding: 5px;
    color: white;
}

.inline-block-item {
    display: inline-block;
    width: 200px;
    height: 50px;
    background-color: #2196F3;
    margin: 5px;
    color: white;
}        

This example shows how to control layout and spacing using different display properties for elements.

Conclusion

The display property is one of the most powerful tools in CSS. Understanding the differences between block, inline, inline-block, and none gives you greater control over how your elements are laid out on the page.

Visit My Website

follow me on DEV

Read Next-