[{"data":1,"prerenderedAt":1014},["ShallowReactive",2],{"page-\u002Fcss\u002F03-box-model":3},{"id":4,"title":5,"body":6,"description":1006,"extension":1007,"meta":1008,"navigation":1009,"path":1010,"seo":1011,"stem":1012,"__hash__":1013},"content\u002Fcss\u002F03-box-model.md","03 — The Box Model: Formatting Contexts & Margin Collapse",{"type":7,"value":8,"toc":988},"minimark",[9,13,22,31,90,95,161,243,247,259,269,273,325,366,370,447,454,464,468,514,588,616,620,726,730,791,795,875,879,939,984],[10,11,5],"h1",{"id":12},"_03-the-box-model-formatting-contexts-margin-collapse",[14,15,16,17,21],"p",{},"Every element is a box: content → padding → border → margin. The engine computes these per element, then lays them out according to a ",[18,19,20],"em",{},"formatting context"," (block, flex, grid, table). The two bugs that waste the most engineering hours — \"my width:100% overflows\" and \"my margins collapsed\" — are both box-model mechanics, not mysteries.",[23,24,26,30],"h2",{"id":25},"box-sizing-the-one-reset-that-matters",[27,28,29],"code",{},"box-sizing"," — the one reset that matters",[32,33,35],"code-wrapper",{"language":34},"css",[36,37,41],"pre",{"className":38,"code":39,"language":34,"meta":40,"style":40},"language-css shiki shiki-themes github-light github-dark","\u002F* content-box (default): width = content area only. padding + border ADDED on top.\n   width:100px + padding:10px + border:2px → 124px rendered. Intuitive? No. *\u002F\n* { box-sizing: border-box; }  \u002F* border-box: width INCLUDES padding+border → 100px is 100px. *\u002F\n\u002F* This reset goes in @layer reset, first line of the sheet. It is non-negotiable. *\u002F\n","",[27,42,43,52,58,84],{"__ignoreMap":40},[44,45,48],"span",{"class":46,"line":47},"line",1,[44,49,51],{"class":50},"sdCPZ","\u002F* content-box (default): width = content area only. padding + border ADDED on top.\n",[44,53,55],{"class":46,"line":54},2,[44,56,57],{"class":50},"   width:100px + padding:10px + border:2px → 124px rendered. Intuitive? No. *\u002F\n",[44,59,61,65,69,72,75,78,81],{"class":46,"line":60},3,[44,62,64],{"class":63},"sk71V","*",[44,66,68],{"class":67},"ssxIu"," { ",[44,70,29],{"class":71},"snvgF",[44,73,74],{"class":67},": ",[44,76,77],{"class":71},"border-box",[44,79,80],{"class":67},"; }  ",[44,82,83],{"class":50},"\u002F* border-box: width INCLUDES padding+border → 100px is 100px. *\u002F\n",[44,85,87],{"class":46,"line":86},4,[44,88,89],{"class":50},"\u002F* This reset goes in @layer reset, first line of the sheet. It is non-negotiable. *\u002F\n",[91,92,94],"h3",{"id":93},"anti-pattern-width100-padding-overflows-the-parent","Anti-pattern: width:100% + padding overflows the parent",[32,96,97],{"language":34},[36,98,100],{"className":38,"code":99,"language":34,"meta":40,"style":40},"\u002F* ❌ content-box: 100% content + 20px padding + 2px border = 100% + 22px → horizontal scroll *\u002F\ninput { width: 100%; padding: 10px; border: 1px solid gray; }\n",[27,101,102,107],{"__ignoreMap":40},[44,103,104],{"class":46,"line":47},[44,105,106],{"class":50},"\u002F* ❌ content-box: 100% content + 20px padding + 2px border = 100% + 22px → horizontal scroll *\u002F\n",[44,108,109,112,114,117,119,122,126,129,132,134,137,140,142,145,147,150,152,155,158],{"class":46,"line":54},[44,110,111],{"class":63},"input",[44,113,68],{"class":67},[44,115,116],{"class":71},"width",[44,118,74],{"class":67},[44,120,121],{"class":71},"100",[44,123,125],{"class":124},"svdQ7","%",[44,127,128],{"class":67},"; ",[44,130,131],{"class":71},"padding",[44,133,74],{"class":67},[44,135,136],{"class":71},"10",[44,138,139],{"class":124},"px",[44,141,128],{"class":67},[44,143,144],{"class":71},"border",[44,146,74],{"class":67},[44,148,149],{"class":71},"1",[44,151,139],{"class":124},[44,153,154],{"class":71}," solid",[44,156,157],{"class":71}," gray",[44,159,160],{"class":67},"; }\n",[32,162,163],{"language":34},[36,164,166],{"className":38,"code":165,"language":34,"meta":40,"style":40},"\u002F* ✓ border-box: 100% includes padding+border → fits exactly *\u002F\n*, *::before, *::after { box-sizing: border-box; }\ninput { width: 100%; padding: 10px; border: 1px solid gray; }\n",[27,167,168,173,203],{"__ignoreMap":40},[44,169,170],{"class":46,"line":47},[44,171,172],{"class":50},"\u002F* ✓ border-box: 100% includes padding+border → fits exactly *\u002F\n",[44,174,175,177,180,182,186,188,190,193,195,197,199,201],{"class":46,"line":54},[44,176,64],{"class":63},[44,178,179],{"class":67},", ",[44,181,64],{"class":63},[44,183,185],{"class":184},"sIsaT","::before",[44,187,179],{"class":67},[44,189,64],{"class":63},[44,191,192],{"class":184},"::after",[44,194,68],{"class":67},[44,196,29],{"class":71},[44,198,74],{"class":67},[44,200,77],{"class":71},[44,202,160],{"class":67},[44,204,205,207,209,211,213,215,217,219,221,223,225,227,229,231,233,235,237,239,241],{"class":46,"line":60},[44,206,111],{"class":63},[44,208,68],{"class":67},[44,210,116],{"class":71},[44,212,74],{"class":67},[44,214,121],{"class":71},[44,216,125],{"class":124},[44,218,128],{"class":67},[44,220,131],{"class":71},[44,222,74],{"class":67},[44,224,136],{"class":71},[44,226,139],{"class":124},[44,228,128],{"class":67},[44,230,144],{"class":71},[44,232,74],{"class":67},[44,234,149],{"class":71},[44,236,139],{"class":124},[44,238,154],{"class":71},[44,240,157],{"class":71},[44,242,160],{"class":67},[23,244,246],{"id":245},"margin-collapsing-the-exact-rules","Margin Collapsing — the exact rules",[14,248,249,250,254,255,258],{},"Adjacent ",[251,252,253],"strong",{},"vertical"," margins between block-level boxes collapse to the ",[251,256,257],{},"larger"," value (they don't add). This is the #1 \"why is my gap smaller than I coded?\" cause.",[32,260,262],{"language":261},"text",[36,263,267],{"className":264,"code":266,"language":261,"meta":40},[265],"language-text","RULES — when margins DO collapse (vertical\u002Fblock direction only):\n  1. Adjacent siblings: \u003Cp mb=30> + \u003Cp mt=20> → 30px gap (not 50).\n  2. Parent ↔ first\u002Flast child: if NO border\u002Fpadding\u002Finline-content separates them.\n  3. Empty block: top and bottom margins of an element with no content\u002Fheight collapse.\n\nRULES — when they DO NOT collapse:\n  - Horizontal (inline-axis) margins — never.\n  - Flex\u002Fgrid items — never (flex\u002Fgrid establish new formatting contexts).\n  - Elements with `overflow` other than visible (creates a BFC).\n  - Floats \u002F absolutely positioned elements.\n  - Parent has padding-top\u002Fborder-top blocking parent↔child.\n",[27,268,266],{"__ignoreMap":40},[91,270,272],{"id":271},"anti-pattern-parent-child-margin-collapse-breaks-spacing","Anti-pattern: parent-child margin collapse breaks spacing",[32,274,275],{"language":34},[36,276,278],{"className":38,"code":277,"language":34,"meta":40,"style":40},"\u002F* ❌ The child's margin-top \"escapes\" through the parent (no border\u002Fpadding to separate) *\u002F\n.parent { background: gray; }\n.child { margin-top: 2rem; }  \u002F* the 2rem pushes the PARENT down, not the child inside it *\u002F\n",[27,279,280,285,302],{"__ignoreMap":40},[44,281,282],{"class":46,"line":47},[44,283,284],{"class":50},"\u002F* ❌ The child's margin-top \"escapes\" through the parent (no border\u002Fpadding to separate) *\u002F\n",[44,286,287,290,292,295,297,300],{"class":46,"line":54},[44,288,289],{"class":184},".parent",[44,291,68],{"class":67},[44,293,294],{"class":71},"background",[44,296,74],{"class":67},[44,298,299],{"class":71},"gray",[44,301,160],{"class":67},[44,303,304,307,309,312,314,317,320,322],{"class":46,"line":60},[44,305,306],{"class":184},".child",[44,308,68],{"class":67},[44,310,311],{"class":71},"margin-top",[44,313,74],{"class":67},[44,315,316],{"class":71},"2",[44,318,319],{"class":124},"rem",[44,321,80],{"class":67},[44,323,324],{"class":50},"\u002F* the 2rem pushes the PARENT down, not the child inside it *\u002F\n",[32,326,327],{"language":34},[36,328,330],{"className":38,"code":329,"language":34,"meta":40,"style":40},"\u002F* ✓ Establish a block formatting context (BFC) on the parent → child margins stay inside *\u002F\n.parent { display: flow-root; }  \u002F* modern: creates BFC, contains floats AND margins, no overflow clipping *\u002F\n\u002F* Alternatives: overflow:hidden (also clips — avoid if shadows need to escape),\n   padding-top:1px \u002F border-top:1px (visual side effects), display:flow-root (cleanest). *\u002F\n",[27,331,332,337,356,361],{"__ignoreMap":40},[44,333,334],{"class":46,"line":47},[44,335,336],{"class":50},"\u002F* ✓ Establish a block formatting context (BFC) on the parent → child margins stay inside *\u002F\n",[44,338,339,341,343,346,348,351,353],{"class":46,"line":54},[44,340,289],{"class":184},[44,342,68],{"class":67},[44,344,345],{"class":71},"display",[44,347,74],{"class":67},[44,349,350],{"class":71},"flow-root",[44,352,80],{"class":67},[44,354,355],{"class":50},"\u002F* modern: creates BFC, contains floats AND margins, no overflow clipping *\u002F\n",[44,357,358],{"class":46,"line":60},[44,359,360],{"class":50},"\u002F* Alternatives: overflow:hidden (also clips — avoid if shadows need to escape),\n",[44,362,363],{"class":46,"line":86},[44,364,365],{"class":50},"   padding-top:1px \u002F border-top:1px (visual side effects), display:flow-root (cleanest). *\u002F\n",[23,367,369],{"id":368},"negative-margins-the-only-legitimate-hack","Negative Margins — the only legitimate hack",[32,371,372],{"language":34},[36,373,375],{"className":38,"code":374,"language":34,"meta":40,"style":40},"\u002F* Negative margins pull elements closer than normal flow allows. Real use cases: *\u002F\n.card { margin-block-end: -1px; }  \u002F* overlap adjacent card borders → single 1px line between them *\u002F\n.full-bleed { margin-inline: calc(50% - 50vw); }  \u002F* break out of a max-width container to full viewport *\u002F\n\u002F* ⚠️ Negative margins change layout geometry — siblings reflow. Test with DevTools box diagram. *\u002F\n",[27,376,377,382,404,442],{"__ignoreMap":40},[44,378,379],{"class":46,"line":47},[44,380,381],{"class":50},"\u002F* Negative margins pull elements closer than normal flow allows. Real use cases: *\u002F\n",[44,383,384,387,389,392,394,397,399,401],{"class":46,"line":54},[44,385,386],{"class":184},".card",[44,388,68],{"class":67},[44,390,391],{"class":71},"margin-block-end",[44,393,74],{"class":67},[44,395,396],{"class":71},"-1",[44,398,139],{"class":124},[44,400,80],{"class":67},[44,402,403],{"class":50},"\u002F* overlap adjacent card borders → single 1px line between them *\u002F\n",[44,405,406,409,411,414,416,419,422,425,427,430,433,436,439],{"class":46,"line":60},[44,407,408],{"class":184},".full-bleed",[44,410,68],{"class":67},[44,412,413],{"class":71},"margin-inline",[44,415,74],{"class":67},[44,417,418],{"class":71},"calc",[44,420,421],{"class":67},"(",[44,423,424],{"class":71},"50",[44,426,125],{"class":124},[44,428,429],{"class":124}," -",[44,431,432],{"class":71}," 50",[44,434,435],{"class":124},"vw",[44,437,438],{"class":67},"); }  ",[44,440,441],{"class":50},"\u002F* break out of a max-width container to full viewport *\u002F\n",[44,443,444],{"class":46,"line":86},[44,445,446],{"class":50},"\u002F* ⚠️ Negative margins change layout geometry — siblings reflow. Test with DevTools box diagram. *\u002F\n",[23,448,450,453],{"id":449},"min-width-auto-the-flexgrid-layout-killer",[27,451,452],{},"min-width: auto"," — the flex\u002Fgrid layout killer",[14,455,456,457,459,460,463],{},"This is the most common flexbox\u002Fgrid bug in production. Flex and grid items have ",[27,458,452],{}," by default, meaning they ",[251,461,462],{},"refuse to shrink below their content's intrinsic minimum size",".",[91,465,467],{"id":466},"anti-pattern-flex-items-overflow-with-long-content","Anti-pattern: flex items overflow with long content",[32,469,470],{"language":34},[36,471,473],{"className":38,"code":472,"language":34,"meta":40,"style":40},"\u002F* ❌ Long unbreakable content (URL, long word) can't shrink below its intrinsic width → row overflows *\u002F\n.row { display: flex; }\n.item { flex: 1; }  \u002F* flex:1 = grow:1 shrink:1 basis:0%, BUT min-width:auto blocks shrinking *\u002F\n",[27,474,475,480,496],{"__ignoreMap":40},[44,476,477],{"class":46,"line":47},[44,478,479],{"class":50},"\u002F* ❌ Long unbreakable content (URL, long word) can't shrink below its intrinsic width → row overflows *\u002F\n",[44,481,482,485,487,489,491,494],{"class":46,"line":54},[44,483,484],{"class":184},".row",[44,486,68],{"class":67},[44,488,345],{"class":71},[44,490,74],{"class":67},[44,492,493],{"class":71},"flex",[44,495,160],{"class":67},[44,497,498,501,503,505,507,509,511],{"class":46,"line":60},[44,499,500],{"class":184},".item",[44,502,68],{"class":67},[44,504,493],{"class":71},[44,506,74],{"class":67},[44,508,149],{"class":71},[44,510,80],{"class":67},[44,512,513],{"class":50},"\u002F* flex:1 = grow:1 shrink:1 basis:0%, BUT min-width:auto blocks shrinking *\u002F\n",[32,515,516],{"language":34},[36,517,519],{"className":38,"code":518,"language":34,"meta":40,"style":40},"\u002F* ✓ min-width:0 releases the content-size floor; overflow-wrap handles the text *\u002F\n.row { display: flex; gap: 1rem; }\n.item { flex: 1; min-width: 0; overflow-wrap: break-word; }  \u002F* now it shrinks as flex intends *\u002F\n",[27,520,521,526,551],{"__ignoreMap":40},[44,522,523],{"class":46,"line":47},[44,524,525],{"class":50},"\u002F* ✓ min-width:0 releases the content-size floor; overflow-wrap handles the text *\u002F\n",[44,527,528,530,532,534,536,538,540,543,545,547,549],{"class":46,"line":54},[44,529,484],{"class":184},[44,531,68],{"class":67},[44,533,345],{"class":71},[44,535,74],{"class":67},[44,537,493],{"class":71},[44,539,128],{"class":67},[44,541,542],{"class":71},"gap",[44,544,74],{"class":67},[44,546,149],{"class":71},[44,548,319],{"class":124},[44,550,160],{"class":67},[44,552,553,555,557,559,561,563,565,568,570,573,575,578,580,583,585],{"class":46,"line":60},[44,554,500],{"class":184},[44,556,68],{"class":67},[44,558,493],{"class":71},[44,560,74],{"class":67},[44,562,149],{"class":71},[44,564,128],{"class":67},[44,566,567],{"class":71},"min-width",[44,569,74],{"class":67},[44,571,572],{"class":71},"0",[44,574,128],{"class":67},[44,576,577],{"class":71},"overflow-wrap",[44,579,74],{"class":67},[44,581,582],{"class":71},"break-word",[44,584,80],{"class":67},[44,586,587],{"class":50},"\u002F* now it shrinks as flex intends *\u002F\n",[14,589,590,593,594,596,597,600,601,604,605,608,609,612,613,615],{},[251,591,592],{},"Why:"," ",[27,595,452],{}," computes to the content's intrinsic size (the longest unbreakable word\u002FURL). ",[27,598,599],{},"min-width: 0"," overrides this floor, letting ",[27,602,603],{},"flex-shrink"," do its job. The same fix applies to grid items with ",[27,606,607],{},"1fr"," tracks that won't shrink (use ",[27,610,611],{},"minmax(0, 1fr)"," on the track, or ",[27,614,599],{}," on the item).",[23,617,619],{"id":618},"responsive-container-the-universal-pattern","Responsive Container — the universal pattern",[32,621,622],{"language":34},[36,623,625],{"className":38,"code":624,"language":34,"meta":40,"style":40},".container {\n  width: 100%;\n  max-width: 1200px;       \u002F* cap growth on large screens *\u002F\n  margin-inline: auto;     \u002F* center when viewport > 1200px (auto margins = equal leftover space) *\u002F\n  padding-inline: clamp(1rem, 5vw, 3rem);  \u002F* fluid gutter, bounded *\u002F\n}\n",[27,626,627,635,649,667,683,720],{"__ignoreMap":40},[44,628,629,632],{"class":46,"line":47},[44,630,631],{"class":184},".container",[44,633,634],{"class":67}," {\n",[44,636,637,640,642,644,646],{"class":46,"line":54},[44,638,639],{"class":71},"  width",[44,641,74],{"class":67},[44,643,121],{"class":71},[44,645,125],{"class":124},[44,647,648],{"class":67},";\n",[44,650,651,654,656,659,661,664],{"class":46,"line":60},[44,652,653],{"class":71},"  max-width",[44,655,74],{"class":67},[44,657,658],{"class":71},"1200",[44,660,139],{"class":124},[44,662,663],{"class":67},";       ",[44,665,666],{"class":50},"\u002F* cap growth on large screens *\u002F\n",[44,668,669,672,674,677,680],{"class":46,"line":86},[44,670,671],{"class":71},"  margin-inline",[44,673,74],{"class":67},[44,675,676],{"class":71},"auto",[44,678,679],{"class":67},";     ",[44,681,682],{"class":50},"\u002F* center when viewport > 1200px (auto margins = equal leftover space) *\u002F\n",[44,684,686,689,691,694,696,698,700,702,705,707,709,712,714,717],{"class":46,"line":685},5,[44,687,688],{"class":71},"  padding-inline",[44,690,74],{"class":67},[44,692,693],{"class":71},"clamp",[44,695,421],{"class":67},[44,697,149],{"class":71},[44,699,319],{"class":124},[44,701,179],{"class":67},[44,703,704],{"class":71},"5",[44,706,435],{"class":124},[44,708,179],{"class":67},[44,710,711],{"class":71},"3",[44,713,319],{"class":124},[44,715,716],{"class":67},");  ",[44,718,719],{"class":50},"\u002F* fluid gutter, bounded *\u002F\n",[44,721,723],{"class":46,"line":722},6,[44,724,725],{"class":67},"}\n",[23,727,729],{"id":728},"tips-tricks","💡 Tips & Tricks",[731,732,733,747,762,780],"ul",{},[734,735,736,74,739,742,743,746],"li",{},[251,737,738],{},"Idiom",[27,740,741],{},"display: flow-root"," is the modern clearfix\u002FBFC — it contains floated children and child margins without ",[27,744,745],{},"overflow: hidden","'s clipping side effects. Use it wherever a parent \"loses\" its children's height or margins.",[734,748,749,74,751,754,755,757,758,761],{},[251,750,738],{},[27,752,753],{},"padding-top: 56.25%"," is the legacy 16:9 aspect-ratio hack (percentage padding is relative to the parent's ",[18,756,116],{},", not height). Modern: ",[27,759,760],{},"aspect-ratio: 16\u002F9"," — no padding gymnastics.",[734,763,764,766,767,179,770,179,772,775,776,779],{},[251,765,738],{},": use logical properties (",[27,768,769],{},"margin-block",[27,771,413],{},[27,773,774],{},"padding-inline",") — they're writing-mode-aware and flip automatically in RTL. ",[27,777,778],{},"margin-inline: auto"," centers in the inline direction regardless of writing mode.",[734,781,782,74,784,786,787,790],{},[251,783,738],{},[27,785,745],{}," clips shadows and transforms of children. Use ",[27,788,789],{},"overflow: clip"," (same clipping, no scroll container, no BFC side effects) when you only need visual clipping.",[23,792,794],{"id":793},"️-edge-cases-gotchas","⚠️ Edge Cases & Gotchas",[731,796,797,817,829,842,863],{},[734,798,799,805,806,179,809,812,813,816],{},[251,800,801,804],{},[27,802,803],{},"height: 100%"," needs a parent with a defined height",": if the parent is ",[27,807,808],{},"height: auto",[27,810,811],{},"100%"," resolves to 0. Use ",[27,814,815],{},"100dvh",", flex\u002Fgrid stretching, or set the parent's height explicitly.",[734,818,819,74,822,825,826,828],{},[251,820,821],{},"Percentage padding is relative to the parent's WIDTH",[27,823,824],{},"padding-top: 50%"," is 50% of the parent's ",[18,827,116],{},". This is the basis of the aspect-ratio hack and a source of confusion.",[734,830,831,837,838,841],{},[251,832,833,836],{},[27,834,835],{},"overflow: auto"," causes scrollbar layout shift",": the scrollbar takes space when it appears. Use ",[27,839,840],{},"scrollbar-gutter: stable"," to reserve the gutter.",[734,843,844,74,855,858,859,862],{},[251,845,846,848,849,852,853],{},[27,847,567],{}," beats ",[27,850,851],{},"max-width"," when the container is smaller than ",[27,854,567],{},[27,856,857],{},"min-width: 200px; max-width: 500px; width: 100%"," overflows below 200px container — ",[27,860,861],{},"min"," wins.",[734,864,865,74,868,871,872,874],{},[251,866,867],{},"Margin doesn't affect the element's size",[27,869,870],{},"margin"," is outside the border; ",[27,873,116],{}," (border-box) includes padding+border but NOT margin. The box model diagram in DevTools is ground truth.",[23,876,878],{"id":877},"spot-the-bug","🧠 Spot the Bug",[32,880,881],{"language":34},[36,882,884],{"className":38,"code":883,"language":34,"meta":40,"style":40},"input {\n    width: 100%;\n    padding: 10px;\n    border: 1px solid gray;\n}\n",[27,885,886,892,905,918,935],{"__ignoreMap":40},[44,887,888,890],{"class":46,"line":47},[44,889,111],{"class":63},[44,891,634],{"class":67},[44,893,894,897,899,901,903],{"class":46,"line":54},[44,895,896],{"class":71},"    width",[44,898,74],{"class":67},[44,900,121],{"class":71},[44,902,125],{"class":124},[44,904,648],{"class":67},[44,906,907,910,912,914,916],{"class":46,"line":60},[44,908,909],{"class":71},"    padding",[44,911,74],{"class":67},[44,913,136],{"class":71},[44,915,139],{"class":124},[44,917,648],{"class":67},[44,919,920,923,925,927,929,931,933],{"class":46,"line":86},[44,921,922],{"class":71},"    border",[44,924,74],{"class":67},[44,926,149],{"class":71},[44,928,139],{"class":124},[44,930,154],{"class":71},[44,932,157],{"class":71},[44,934,648],{"class":67},[44,936,937],{"class":46,"line":685},[44,938,725],{"class":67},[940,941,942,946],"details",{},[943,944,945],"summary",{},"Answer",[14,947,948,949,952,953,956,957,960,961,964,965,968,969,972,973,976,977,979,980,983],{},"Default ",[27,950,951],{},"box-sizing: content-box"," → ",[27,954,955],{},"width: 100%"," sets the ",[18,958,959],{},"content"," to 100% of the parent, then ",[27,962,963],{},"padding: 10px"," (20px total) and ",[27,966,967],{},"border: 1px"," (2px total) are added → ",[27,970,971],{},"100% + 22px"," → horizontal overflow. Fix: ",[27,974,975],{},"box-sizing: border-box"," (via the universal reset) so ",[27,978,955],{}," includes padding and border. This is why ",[27,981,982],{},"*, *::before, *::after { box-sizing: border-box; }"," is line one of every production stylesheet.",[985,986,987],"style",{},"html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-dark:#6A737D}html pre.shiki code .sk71V, html code.shiki .sk71V{--shiki-default:#22863A;--shiki-github-dark:#85E89D}html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .snvgF, html code.shiki .snvgF{--shiki-default:#005CC5;--shiki-github-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-dark:#F97583}html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}",{"title":40,"searchDepth":54,"depth":54,"links":989},[990,994,997,998,1002,1003,1004,1005],{"id":25,"depth":54,"text":991,"children":992},"box-sizing — the one reset that matters",[993],{"id":93,"depth":60,"text":94},{"id":245,"depth":54,"text":246,"children":995},[996],{"id":271,"depth":60,"text":272},{"id":368,"depth":54,"text":369},{"id":449,"depth":54,"text":999,"children":1000},"min-width: auto — the flex\u002Fgrid layout killer",[1001],{"id":466,"depth":60,"text":467},{"id":618,"depth":54,"text":619},{"id":728,"depth":54,"text":729},{"id":793,"depth":54,"text":794},{"id":877,"depth":54,"text":878},"Box-sizing, the formatting context model, margin collapsing rules, and the min-width:auto trap that breaks flex\u002Fgrid layouts. Code-first reference with production reset and negative-margin patterns.","md",{},true,"\u002Fcss\u002F03-box-model",{"title":5,"description":1006},"css\u002F03-box-model","ozmsc_sAEP5TNHGXndsWCuMcDwGtFPubAmVwrp_GVl0",1789924644819]