Displaying Elements Relative to Each Other

You add three paragraphs and three short labels in <span> tags to a page. The paragraphs line up one below another, while the labels stand in a single row - even though you haven't written a single line of CSS. Why the difference? The answer lies in the display property, which decides how an element's box is laid out relative to its neighbors.

Block Elements - One Below Another

Let's look at an example. Here are three paragraphs written in the code one after another, without any styles:

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

Paragraphs are displayed one below the other. Each starts on a new line and stretches across the full width of its parent, even if its text takes up only a small part of it. That's how block elements work - like the stone blocks of a pyramid, each of which fills a whole layer.

Inline Elements - Side by Side

Let's look at another case. The same three lines, but this time written with the <span> tag instead of <p>:

<span>Span 1</span>
<span>Span 2</span>
<span>Span 3</span>

All elements will be displayed next to each other. By default, a paragraph is a block element, and a span is an inline element: it takes up only as much space as its content needs and flows along the line of text like a hieroglyph in a verse. The line breaks between the spans in the code have turned into single spaces - that's why there's a gap between the labels.

The Three Most Important display Values

Values of the display property, such as inline, block, and others, are key CSS elements that describe how HTML elements are presented on the page. Here is a description of three popular values:

• inline: Elements with the display property set to inline don't start on a new line and only take up as much space as they need. Examples of inline elements are <span>, <a>, and <img>.
• block: Elements with the display property set to block start on a new line and take up the full available width of the container. Examples of block elements are <div>, <p>, and <h1>.
• inline-block: The element behaves like an inline element, but you can apply block element properties to it, such as width and height.

An inline element ignores width and height. The exception is <img>, a so-called replaced element: despite display: inline, dimensions work on it normally. You can, however, give any of these values to any element. Let's turn the spans into equal tiles that still stand side by side:

span {
  display: inline-block;
  width: 100px;
  height: 80px;
}

The spans still stand in one row, but now they are 100px wide and 80px tall - like statues set in an even row in a temple. The HTML hasn't changed: a span is still a span, only the way its box is laid out on the page has changed.

display: none - The Element Disappears

There is one more value you'll use very often. Sometimes you want an element to disappear from the page completely, for example a collapsed menu:

.hidden {
  display: none;
}

An element with this class isn't displayed and takes up no space - its neighbors move as if it didn't exist in the document. Its code, however, is still in the HTML file. Watch out for similar declarations: visibility: hidden and opacity: 0 also hide an element, but leave an empty space behind. An element with display: none takes no space at all, inline and inline-block take as much space as their content needs (inline-block can also get its own dimensions), and block takes the full width of its parent.

Other display Values

Additionally, there are other display property values, such as flex, grid, and table. An element with display set to flex becomes a flexbox container, enabling advanced arrangement and management of its descendants. An element with display set to grid becomes a CSS grid container, allowing for creating more complex and responsive page layouts. If an element has display set to table, it behaves like an HTML table element, enabling formatting and arranging data in a table structure. Flexbox gets a whole module of its own, the very next one, and CSS Grid is covered in the module on page design.

My advice: don't change display blindly. First check in the developer tools, on the Computed tab, what value the element has by default.

Practice

In the editor below you'll see all three behaviors at once: block paragraphs, inline spans and inline-block tiles. Try giving the spans a width and check whether anything changes:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Display in CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Displaying Elements</h1>

    <h2>Block elements (block)</h2>
    <p class="block-el">Paragraph 1 - block element</p>
    <p class="block-el">Paragraph 2 - block element</p>
    <p class="block-el">Paragraph 3 - block element</p>

    <h2>Inline elements (inline)</h2>
    <span class="inline-el">Span 1</span>
    <span class="inline-el">Span 2</span>
    <span class="inline-el">Span 3</span>

    <h2>Inline-block</h2>
    <div class="inline-block-el">Box A</div>
    <div class="inline-block-el">Box B</div>
    <div class="inline-block-el">Box C</div>
</body>
</html>

Remember: block is a stone block filling a whole layer of the pyramid, inline is a hieroglyph flowing along a verse, and inline-block is a statue that stands in a row but has its own dimensions.