HTML & CSS Styling CoreLesson 19Free preview

Box Model

This lesson is part of Intro to HTML & CSS · All levels

Summary

Each HTML element is a box of content, padding, border, and margin. This lesson explains the order of the layers and the box-sizing properties that change the way width is calculated. Understanding the box model makes layout predictions much more accurate.

Key points

Layer from outside to inside: margin, border, padding, content
Padding is space inside, margin space outside between elements
Box-sizing: border-box makes width already includes padding and border

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.