Learn how size and display settings affect the way boxes and sections behave on a page.
15 minute lesson with 5 sections, 4 exercises, 5 checkpoint questions, and 1 homework submission.
Student mode saves sections, safe practice results, quiz progress, and completion status.
Once a page has styled cards and sections, beginners start noticing that the boxes themselves also need control.
Width, height, and display help those boxes behave more intentionally instead of just appearing however the browser decides by default.
Visual style helps, but element behavior matters too.
Width controls how wide an element can be. Height controls how tall it can be.
Beginners do not need to set width and height on every element, but they do need to know those properties exist when a box is behaving unexpectedly.
Width is left-to-right size. Height is top-to-bottom size.
display affects how an element participates in the layout. Some elements behave like blocks that take more room, while others behave more like inline content.
Later, display also helps turn a container into a flexbox layout.
display changes how a box acts in the layout, not what the content means.
If CSS says .panel { width: 100%; }, the panel stretches across the available container width. If it says .panel { display: block; }, the panel behaves more like a full block element.
Those are behavior choices, not content changes.
Width and display help shape how the element behaves on the page.
Width, height, and display help individual elements behave more predictably.
The next lesson applies that idea to multiple items at once with Flexbox, which helps arrange rows and columns more calmly.
Element size and layout behavior set up the next step in page structure.
Use the student player for saved sections, safe practice, quiz progress, and completion tracking.