07_the_box_model
dz / mdn / css / 1_css_building_blocks / 07_the_box_modelSummary
The Box Model
Node Tree
- parts_of_box
- box_model
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 |