01_normal_flow
dz / mdn / css / 3_css_layout / 01_normal_flowSummary
Normal Flow
Node Tree
Nodes
normal_flow | |
content | Normal Flow |
children | box_model, block_level_elem, readable_document_design, webpage_layout_if_unchanged (description), inline_level_elem |
webpage_layout_if_unchanged | |
content | Way webpage lays out elements if layout unchanged. |
parents | normal_flow |
readable_document_design | |
content | Designed to produce readable document |
parents | normal_flow |
box_model | |
content | box model: boxes of individual elements laid out in such a way that padding, border, or margin is added to their content |
parents | normal_flow |
block_level_elem | |
content | Block level element fills available inline space of parent element it is contained in, growing along block dimension |
children | laid_out_block_direction, inline_level_elem (related) |
parents | normal_flow |
inline_level_elem | |
content | Inline level element is the size of their content |
children | inline_same_line_adjacent_wrapped_text |
parents | block_level_elem, normal_flow |
laid_out_block_direction | |
content | Laid out in block direction |
parents | block_level_elem |
inline_same_line_adjacent_wrapped_text | |
content | Inline elements sit on same line along adjacent or wrapped text |
parents | inline_level_elem |
margin_collapsing | |
content | Margin Collapsing: 2 vertically adjacent elements touch with margin set on them, large margin remains, other disappears. |
children | vertical_direction_only |
vertical_direction_only | |
content | Only relevant in vertical direction |
parents | margin_collapsing |