Suggestion: add a diagram to the "What Is the CSS Box Model" lesson
Describe the Issue
The lesson explains the four parts of the box model in prose, but the concept is spatial: four areas nested inside one another. I think add small diagram placed after the introductory paragraph would help campers build the mental model before they read about each property individually.
The contributing docs mention that diagrams can be added where necessary, so I wanted to propose one here rather than open a PR directly, since theory lesson content is staff-authored.
Suggested placement
Right after the paragraph beginning "In the CSS box model, every element is surrounded by a box", and before the explanation of the content area.
Proposed diagram
Notes on the image:
- Drawn as SVG, so it stays sharp at any size.
- All fills are opaque with dark text, so it reads correctly on both the light and dark themes without needing two versions.
- Margin and padding use dashed outlines since they are transparent areas; the border uses a solid stroke since it is the only visible one.
- Suggested alt text: "Four nested rectangles showing the CSS box model: the margin on the outside, then the border, then the padding, and the content area at the center."
- It is my own work, so there are no licensing concerns.
Happy to adjust the colors, wording, or proportions if the team would like something different, or to drop it entirely if a diagram isn't wanted here.
Affected Page
Challenge id: 672bcc9c4a6dd6d7dd3e6357
Expected behavior
A simple diagram of the CSS box model appears after the introductory paragraph, showing the four nested areas.
Source: freeCodeCamp/freeCodeCamp