01_normal_flow

dz / mdn / css / 3_css_layout / 01_normal_flow

Summary

Normal Flow

Node Tree

• margin_collapsing
  • vertical_direction_only
• normal_flow
  • box_model
  • block_level_elem
    • laid_out_block_direction
    • inline_level_elem
      • inline_same_line_adjacent_wrapped_text
  • readable_document_design
  • webpage_layout_if_unchanged
  • inline_level_elem
    • inline_same_line_adjacent_wrapped_text

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