Every element you place on a web page is rendered as a rectangular box, even when its edges are invisible. The CSS box model describes the four layers of that box: the content area where text and images live, the padding that cushions the content, the border that wraps around the padding, and the margin that separates the box from its neighbors. Understanding these layers is what turns guesswork about spacing into deliberate, predictable design decisions.
This topic matters in COP4813 because almost every layout problem you will face later — aligning sections, spacing navigation links, sizing cards in a grid — comes back to the box model. A related detail, the box-sizing property, determines whether the width you set applies only to the content area (content-box, the default) or includes padding and border (border-box). Many developers set border-box globally precisely because it makes sizing far easier to reason about.
As you watch, pay attention to three things: how shorthand properties such as margin: 10px 20px map to the top, right, bottom, and left sides; how margins behave differently from padding (especially around background color and collapsing margins); and how the browser's DevTools box model diagram lets you read the computed content, padding, border, and margin values for any element on a live page. Try reproducing each demonstration in your own test file rather than only watching.
A tutorial from CodeWithHarry's Sigma Web Development series that walks through the CSS box model with a focus on margin, padding, and borders. Expect hands-on code demonstrations showing how each property affects an element's visible size and spacing, including shorthand notation for setting values on individual sides.
At roughly 18 minutes it is the most thorough walkthrough of the three core spacing layers, and it comes from a widely followed, beginner-oriented web development series, making it a solid primary overview for the content, padding, border, and margin subtopics.
This lesson introduces the box model alongside the div element, so you see the model applied to the generic container you will use most often in layout work. It covers margin, padding, and the box-sizing property, connecting how an element is marked up in HTML to how its box is sized and spaced in CSS.
It is a compact, well-paced review that explicitly includes box-sizing, and pairing the box model with div containers reinforces the connection between HTML structure and CSS spacing that you will need for later layout topics.
A focused deep dive on the box-sizing property and the difference between the content-box and border-box values. The video is devoted to explaining how each setting changes the way declared width and height are calculated once padding and borders are added.
Box-sizing is the single most common source of confusion in the box model, and this video treats it as the main subject rather than a side note, giving you the detailed explanation needed to use border-box confidently in your own stylesheets.
Together these videos target MO3 directly: they demonstrate how content, padding, border, and margin interact and how to manipulate each one to control spacing and sizing. The first two provide the foundational walkthrough of the four box areas and their shorthand syntax, while the third resolves the content-box versus border-box question that determines how your declared widths actually render. Because box model control underpins layout work and overall page polish, the skills practiced here also feed into MO4, where you arrange elements with Flexbox and positioning, and MO5, where you integrate spacing rules with typography, color, and layout in a single organized external stylesheet. Reinforce the viewing by inspecting your own pages in DevTools to verify the computed box values.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.