Normal Flow and Display Property

In the realm of CSS, understanding the normal flow of elements and utilizing the display property are fundamental to crafting well-structured layouts. Let's delve into these concepts with a simple tutorial.

1. Normal Flow:

In the normal flow of a document, elements are laid out one after another in the order they appear in the HTML. Block-level elements stack vertically, while inline elements flow within the text horizontally.

<p>This is a paragraph in the normal flow.</p>
<p>Another paragraph follows below.</p>

In this example, two paragraphs stack vertically due to the normal flow.

2. Display Property:

The display property allows us to alter the default behavior of elements. Here are a few common values:

block: Turns an element into a block-level element, stacking it vertically.

inline: Makes an element inline, allowing it to flow within the text horizontally.

inline-block: Combines features of both block and inline, allowing for block-level styling while flowing within the text.

none: Hides the element as if it doesn't exist.

/* Changing display property */
div {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #2ecc71;
  margin: 10px;
}

Here, a <div> is styled as an inline-block, meaning it maintains block-level styling (like setting width and height) but flows within the text horizontally.

Understanding and manipulating the normal flow and display property are foundational skills that open the door to more complex and creative layouts. Experiment with different display values to observe how they influence the positioning of elements on your web page.