WEBDEV100% Active LaboratoryVISUALIZATION
CSS Box Model & Box-Sizing Geometry Laboratory
Concentric rectangle inspector with interactive sliders for Margin, Border, Padding, and Content dimensions. Toggles border-box vs content-box calculation.
WEBDEV • VISUALIZATIONCSS Box Model & Box-Sizing Geometry Laboratory
WEB DEV • CSS SPECIFICATIONBox Model Geometry & Sizing
CSS Box Model & Box-Sizing Calculation Laboratory
Margin (Outside)24px
Border (Stroke)4px
Padding (Inside)20px
margin: 24px
border: 4px
CONTENT160 × 80
Box Sizing Rule:
Under border-box: Setting width includes padding and border. The content area shrinks automatically to ensure the element never exceeds its specified width, eliminating layout breaks.
Want a step-by-step breakdown from our 4 AI Engineering Agents?
Mastery Standard: Complete all 3 tasks in the Lab Protocol to earn verified mastery credits.
Study Full Unit Notes →