Course: Positioning

Document Flow [1/20]

The sequence of elements on the page is called the document flow. Block-level elements are displayed as rectangular boxes arranged from top to bottom, while inline elements are arranged top to bottom and left to right and can wrap to the next line, if needed.

The elements can be nested one inside another. The earlier is the element in the code, the higher it is on the page.

Some element types may demonstrate somewhat more sophisticated in-flow behavior. For instance, they can arrange column-wise, like inline-block elements. We have learned this already in the "Box Model" course.

Any in-flow element takes up its own space on the page and, if necessary, pushes the neighbors away by its margins.

In this course, we are going to learn the properties that change conventional in-flow behavior of elements.

Do it
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Document Flow</title> </head> <body> <h1 class="outline">Document Flow</h1> <div class="outline">Block-level elements are boxes arranged from left to right and from top to bottom.</div> <div class="outline"> <div class="outline">You can nest the blocks inside each other and arrange them column-wise.</div> <div class="column outline">Column 1</div> <div class="column outline">Column 2</div> <div class="column outline">Column 3</div> </div> <div class="outline"><span class="outline">Inline elements and text simply wrap</span> to the next line, if there&apos;s no more space.</div> </body> </html>
.outline { margin: 5px; padding: 5px; } .column { display: inline-block; }
HTML Academy

Highlight the elements to see the document flow arrangement. To do this:

  1. For the element of the outline class, set background: rgba(0, 0, 0, 0.1);
  2. and border: 1px dotted #666666;
Theory Check Next