Css layout-standard Document Stream

Standard stream refers to the arrangement rules of various elements without using other special CSS rules related to arrangement and positioning. Elements in HTML documents can be divided into two categories: Intra-row elements and block-level elements.
1. The element in the row does not occupy independent space and is attached to block-level elements. The element in the row does not have its own region. It is also a node in the DOM tree. There is no difference between the upstream element and the block-level element.
2. block-level elements are always displayed as blocks, and are arranged vertically in sequence with sibling blocks at the same level. The left and right sides are automatically stretched until the boundaries of the elements that contain the block are not horizontally aligned.
The positioning principle of the box in the standard stream
Margin controls the distance between the box and the box. padding exists in the inside of the box and does not involve the relationship and mutual influence with other boxes. Therefore, it is necessary to precisely control the location of the box, you must have a deeper understanding of margin. The following describes how to adjust the position of the margin box in four cases.
1. Horizontal margin between elements in a row
When the elements in two rows are adjacent, the distance between them is the right margin of the first element plus the left margin of the second element.
2. Vertical margin between block-level elements
The vertical distance between two vertically arranged block-level elements is not the sum of the lower margin of the first element above and the upper margin of the second element, but the greater of the two. Pay special attention to this when creating web pages.
3. margin between nested boxes
In this case, the sub-block margin is arranged based on the content of the parent block.
4. Set margin to a negative value.
This will move the block with a negative number in the opposite direction, and even overwrite the block.