Box Model and Layout

## Learning Objectives - Understand the CSS box model - Master margin, padding, and border properties - Control box sizing - Work with display properties ## The Box Model Every HTML element is a box with four parts: 1. Content - the actual content area 2. Padding - space inside the border 3. Border - the edge of the element 4. Margin - space outside the border ```text ┌─────────────────────────────────────┐ │ MARGIN │ │ ┌───────────────────────────────┐ │ │ │ BORDER │ │ │ │ ┌───────────────────────────┐ │ │ │ │ │ PADDING │ │ │ │ │ │ ┌───────────────────────┐ │ │ │ │ │ │ │ CONTENT │ │ │ │ │ │ │ └───────────────────────┘ │ │ │ │ │ └───────────────────────────┘ │ │ │ └───────────────────────────────┘ │ └─────────────────────────────────────┘ ``` ## Content ```css .box { width: 300px; height: 200px; } ``` ## Padding ```css .box { /* All sides */ padding: 20px; /* Top/bottom, left/right */ padding: 10px 20px; /* Top, right, bottom, left */ padding: 10px 15px 20px 25px; /* Individual sides */ padding-top: 10px; padding-right: 15px; padding-bottom: 20px; padding-left: 25px; } ``` ## Border ### Border Width ```css .box { border-width: 2px; border-width: thin medium thick 10px; } ``` ### Border Style ```css .box { border-style: solid; border-style: dashed; border-style: dotted; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; } ``` ### Border Color ```css .box { border-color: red; border-color: #ff0000; border-color: rgb(255, 0, 0); } ``` ### Border Shorthand ```css .box { border: 2px solid #333; border: 1px dashed red; } ``` ### Individual Borders ```css .box { border-top: 2px solid black; border-bottom: 1px dashed gray; } ``` ### Border Radius ```css .box { border-radius: 5px; border-radius: 10px 5px; border-radius: 50%; border-radius: 50px 10px 20px 5px; } ``` ## Margin ```css .box { /* All sides */ margin: 20px; /* Top/bottom, left/right */ margin: 10px auto; /* Individual sides */ margin-top: 10px; margin-right: 15px; margin-bottom: 20px; margin-left: 25px; } ``` ### Centering with Auto ```css .container { width: 80%; margin: 0 auto; } ``` ### Margin Collapse Vertical margins between adjacent elements collapse: ```css .paragraph1 { margin-bottom: 20px; } .paragraph2 { margin-top: 30px; } /* Actual space between them is 30px, not 50px */ ``` ## Box Sizing ### Content Box (Default) ```css .box { width: 200px; padding: 20px; border: 2px solid black; /* Total width: 200 + 40 + 4 = 244px */ box-sizing: content-box; } ``` ### Border Box (Recommended) ```css .box { width: 200px; padding: 20px; border: 2px solid black; /* Total width: 200px (padding and border included) */ box-sizing: border-box; } ``` ### Global Border Box ```css *, *::before, *::after { box-sizing: border-box; } ``` ## Display Property ### Block Elements ```css div, p, h1, ul, li { display: block; } .block { display: block; width: 100%; /* Default for block */ /* Takes full width, starts on new line */ } ``` ### Inline Elements ```css span, a, strong { display: inline; } ``` ### Inline-Block ```css .button { display: inline-block; width: 200px; /* Width works on inline-block */ padding: 10px; /* Flows with text but accepts box model properties */ } ``` ### None ```css .hidden { display: none; /* Element is removed from layout */ } .invisible { visibility: hidden; /* Element is hidden but space is preserved */ } ``` ### Display Contents ```css .parent { display: contents; /* Parent becomes transparent, children render directly */ } ``` ## Visibility ```css .visible { visibility: visible; /* Default */ } .hidden { visibility: hidden; /* Hidden but space preserved */ } .collapsed { visibility: collapse; /* For table rows, collapses space */ } ``` ## Overflow ```css .box { overflow: visible; /* Default, content spills out */ overflow: hidden; /* Hides overflow content */ overflow: scroll; /* Always shows scrollbars */ overflow: auto; /* Shows scrollbars only when needed */ } ``` ### Overflow-x and Overflow-y ```css .box { overflow-x: auto; /* Horizontal scroll if needed */ overflow-y: hidden; /* Hide vertical overflow */ } ``` ## Width and Height ### Min and Max ```css .container { width: 80%; min-width: 300px; max-width: 1200px; } .image { max-width: 100%; height: auto; } ``` ### Fit Content ```css .box { width: fit-content; margin: 0 auto; } ``` ## Practical Example ```css .card { width: 300px; padding: 20px; border: 1px solid #ddd; border-radius: 8px; margin: 20px auto; box-sizing: border-box; } .card-title { font-size: 1.5em; margin-bottom: 10px; } .card-body { color: #666; line-height: 1.6; } ``` ## Summary - Box model: content, padding, border, margin (outside in) - `box-sizing: border-box` makes sizing more intuitive - `margin: 0 auto` centers block elements - Vertical margins collapse between adjacent elements - `display: block` takes full width; `inline` flows with text; `inline-block` does both - `display: none` removes from layout; `visibility: hidden` hides but preserves space - `overflow` controls how content that exceeds its container is handled