mdn/css/1_css_building_blocks/07_the_box_model

07_the_box_model

dz / mdn / css / 1_css_building_blocks / 07_the_box_model

Summary

The Box Model

Node Tree

Nodes

box_model
content Box Model
children box_model_inline_boxes, display_property, flex, grid, inline_boxes, inner_display_type, normal_flow, outer_display_type, alt_box_model, block_boxes, box_around_it

normal_flow
content Normal Flow
parents box_model

box_around_it
content Everything in CSS has a box around it
parents box_model

block_boxes
content Block Boxes
children inline_boxes (vs)
parents box_model

inline_boxes
content Inline Boxes
children box_model_inline_boxes
parents block_boxes, box_model

flex
content flex
parents box_model

grid
content grid
parents box_model

inner_display_type
content Inner display type
children outer_display_type (vs)
parents box_model

outer_display_type
content Outer display type
children outer_block, outer_inline
parents inner_display_type, box_model

display_property
content Display property
children changes_outer_display_type, display_property_types
parents box_model

outer_block
content Block: newline break, width/height properties respected, padding, margin, border, push elements away, if no width specified, will extend inline direction to fill container
parents outer_display_type

outer_inline
content Inline: no break, width/height don't apply, top/bottom padding margins border apply but do not cause other inline elements to move, left right padding margins border apply and move other inline elements
children default
parents outer_display_type

default
content default
parents outer_inline

display_property_types
content inline, block, inline-flex, flex
parents display_property

changes_outer_display_type
content Changes whether outer display type is block or inline. Changes way it displays alongside other elements in layout.
parents display_property

parts_of_box
content Parts of Box: margin, border, padding, content
children inline_block_size_content, margin_padding_border, order_outer_inner, box_area_stops_border

inline_block_size_content
content inline-size and block-size are for content box
parents parts_of_box

box_area_stops_border
content Box area stops at border. Margin is not counted towards size of box.
parents parts_of_box

order_outer_inner
content Box order (from outer to inner): margin, border, padding, content
parents parts_of_box

alt_box_model
content Alternative box model
children box_sizing_border_box (how to set), any_width_is_visible_box_width (description)
parents box_model

any_width_is_visible_box_width
content Any width is the width of the visible box on the page
parents alt_box_model

box_sizing_border_box
content box-sizeing: border-box
children use_with_all_elems
parents alt_box_model

use_with_all_elems
content Use with all elements: set property on <html> element and set all other elements to inherit the value
children box_sizing_inherit
parents box_sizing_border_box

box_sizing_inherit
content Box Sizing: Inherit
parents use_with_all_elems

margin_padding_border
content Margin, padding, border
children margin, padding, border
parents parts_of_box

margin
content Margin
children collapsing, negative_overlaps, TRBL (varations)
parents margin_padding_border

negative_overlaps
content Negative causes overlap
parents margin

TRBL
content -top, -right, -bottom, -left
parents border, padding, margin

border
content Border
children width_style_color (variations), width_style_color_border_prop, TRBL (variations)
parents margin_padding_border

collapsing
content Collapsing
children collapsing_value_rules, when_to_collapse
parents margin

collapsing_value_rules
content +/+ combined to one, size equal to largest margin. -/- collapse, smallest used (furthest from zero) +/-, -/+ negative value substracts from total
children when_to_collapse (rules *when* to collapse and how to handle margin ,values are two different things)
parents collapsing

when_to_collapse
content Rules dictate when to collapse margins
parents collapsing, collapsing_value_rules

width_style_color
content -width, -style, -color
parents border

width_style_color_border_prop
content Width, style, or color of all border properties
parents border

padding
content padding
children TRBL (variations), background_displays_behind_padding
parents margin_padding_border

background_displays_behind_padding
content Any background applied to your element will display behind padding
parents padding

box_model_inline_boxes
content Box Model and Inline Boxes
children display_inline_block
parents inline_boxes, box_model

display_inline_block
content display: inline-block
children respects_wh_no_break
parents box_model_inline_boxes

respects_wh_no_break
content Respects width/height properties, will not break onto new line
parents display_inline_block