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 |