[{"data":1,"prerenderedAt":254},["ShallowReactive",2],{"term-b\u002Fbox-model":3,"related-b\u002Fbox-model":236},{"id":4,"title":5,"acronym":6,"body":7,"category":217,"description":218,"difficulty":219,"extension":220,"letter":221,"meta":222,"navigation":110,"path":223,"related":224,"seo":230,"sitemap":231,"stem":234,"subcategory":6,"__hash__":235},"terms\u002Fterms\u002Fb\u002Fbox-model.md","Box Model",null,{"type":8,"value":9,"toc":211},"minimark",[10,15,19,23,26,30,200,204,207],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"The box model is how CSS thinks about every element on a page — as a box with four layers: content, padding, border, and margin. Padding is the space inside the box, margin is the space outside. Understanding this ends 90% of 'why is there extra space here?' confusion.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"The CSS box model describes the rectangular boxes generated for elements in the document tree. Each box has: content (width\u002Fheight), padding (inner spacing), border (outline), and margin (outer spacing). box-sizing: border-box makes width\u002Fheight include padding and border, which is the modern standard.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F* Always add this to your CSS reset *\u002F\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n.card {\n  width: 300px;      \u002F* total width INCLUDING padding+border *\u002F\n  padding: 1.5rem;   \u002F* space inside, won't add to width *\u002F\n  border: 2px solid #ccc;\n  margin: 1rem;      \u002F* space outside the box *\u002F\n}\n","css","",[38,39,40,49,82,99,105,112,123,141,157,179,195],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F* Always add this to your CSS reset *\u002F\n",[41,50,52,56,60,63,66,70,72,74,76,79],{"class":43,"line":51},2,[41,53,55],{"class":54},"sBMFI","*",[41,57,59],{"class":58},"sMK4o",",",[41,61,62],{"class":54}," *",[41,64,65],{"class":58},"::",[41,67,69],{"class":68},"spNyl","before",[41,71,59],{"class":58},[41,73,62],{"class":54},[41,75,65],{"class":58},[41,77,78],{"class":68},"after",[41,80,81],{"class":58}," {\n",[41,83,85,89,92,96],{"class":43,"line":84},3,[41,86,88],{"class":87},"sqsOY","  box-sizing",[41,90,91],{"class":58},":",[41,93,95],{"class":94},"sTEyZ"," border-box",[41,97,98],{"class":58},";\n",[41,100,102],{"class":43,"line":101},4,[41,103,104],{"class":58},"}\n",[41,106,108],{"class":43,"line":107},5,[41,109,111],{"emptyLinePlaceholder":110},true,"\n",[41,113,115,118,121],{"class":43,"line":114},6,[41,116,117],{"class":58},".",[41,119,120],{"class":54},"card",[41,122,81],{"class":58},[41,124,126,129,131,135,138],{"class":43,"line":125},7,[41,127,128],{"class":87},"  width",[41,130,91],{"class":58},[41,132,134],{"class":133},"sbssI"," 300px",[41,136,137],{"class":58},";",[41,139,140],{"class":47},"      \u002F* total width INCLUDING padding+border *\u002F\n",[41,142,144,147,149,152,154],{"class":43,"line":143},8,[41,145,146],{"class":87},"  padding",[41,148,91],{"class":58},[41,150,151],{"class":133}," 1.5rem",[41,153,137],{"class":58},[41,155,156],{"class":47},"   \u002F* space inside, won't add to width *\u002F\n",[41,158,160,163,165,168,171,174,177],{"class":43,"line":159},9,[41,161,162],{"class":87},"  border",[41,164,91],{"class":58},[41,166,167],{"class":133}," 2px",[41,169,170],{"class":94}," solid ",[41,172,173],{"class":58},"#",[41,175,176],{"class":94},"ccc",[41,178,98],{"class":58},[41,180,182,185,187,190,192],{"class":43,"line":181},10,[41,183,184],{"class":87},"  margin",[41,186,91],{"class":58},[41,188,189],{"class":133}," 1rem",[41,191,137],{"class":58},[41,193,194],{"class":47},"      \u002F* space outside the box *\u002F\n",[41,196,198],{"class":43,"line":197},11,[41,199,104],{"class":58},[11,201,203],{"id":202},"when-youll-hear-this","When You'll Hear This",[16,205,206],{},"\"Open DevTools and check the box model diagram — your padding is causing the overflow.\" \u002F \"Always use box-sizing: border-box so padding doesn't break your widths.\"",[208,209,210],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":51,"depth":51,"links":212},[213,214,215,216],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":202,"depth":51,"text":203},"frontend","The box model is how CSS thinks about every element on a page — as a box with four layers: content, padding, border, and margin.","beginner","md","b",{},"\u002Fterms\u002Fb\u002Fbox-model",[225,226,227,228,229],"CSS","Flexbox","CSS Grid","Viewport","Responsive Design",{"title":5,"description":218},{"changefreq":232,"priority":233},"weekly",0.7,"terms\u002Fb\u002Fbox-model","AqAn_HnJ0QtKjcbKL3HZTU0KdzkKsKBUDF_9GozSeXw",[237,241,245,248,251],{"title":225,"path":238,"acronym":239,"category":217,"difficulty":219,"description":240},"\u002Fterms\u002Fc\u002Fcss","Cascading Style Sheets","CSS is the makeup and wardrobe for your HTML skeleton. It decides what color everything is, how big things are, and where stuff goes on the page.",{"title":227,"path":242,"acronym":6,"category":217,"difficulty":243,"description":244},"\u002Fterms\u002Fc\u002Fcss-grid","intermediate","CSS Grid is the two-dimensional layout system — rows AND columns at the same time. Think of it like a spreadsheet you can put your whole website into.",{"title":226,"path":246,"acronym":6,"category":217,"difficulty":219,"description":247},"\u002Fterms\u002Ff\u002Fflexbox","Flexbox is a CSS layout system that makes positioning elements in a row or column stupidly easy.",{"title":229,"path":249,"acronym":6,"category":217,"difficulty":219,"description":250},"\u002Fterms\u002Fr\u002Fresponsive-design","Responsive design means your website looks good on EVERY screen size — from a tiny phone to a giant 4K monitor.",{"title":228,"path":252,"acronym":6,"category":217,"difficulty":219,"description":253},"\u002Fterms\u002Fv\u002Fviewport","The viewport is the visible area of a webpage in the user's browser window. It changes depending on the device — small on a phone, huge on a 4K monitor.",1776518261000]