mdn/css/3_css_layout/01_normal_flow

01_normal_flow

dz / mdn / css / 3_css_layout / 01_normal_flow

Summary

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