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.
Highlight the elements to see the document flow arrangement. To do this:
- For the element of the
background: rgba(0, 0, 0, 0.1);
border: 1px dotted #666666;