Displaying Elements Relative to Each Other

Let's look at an example:

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

sandpack

Paragraphs are displayed one below the other as shown in the illustration below:

Let's look at another case:

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

sandpack

All elements will be displayed next to each other. By default, a paragraph is a block element, and a span is an inline element.

Display properties 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 display property 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>.

sandpack

• 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>.

sandpack

• inline-block: The element behaves like an inline element, but you can apply block element properties to it, such as width and height.

sandpack

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.