CSS AdvancedLesson 76Free preview

CSS Box Sizing

This lesson is part of CSS · All levels

Summary

The `box-sizing` model determines whether the `width` we write includes padding and border or just the content. By default, CSS uses `content-box`, so padding and border add to the total width. With `border-box`, the width is directly set to the final size of the box so the layout calculation is much easier.

Key points

`content-box` (default): width = content only, padding and border add size
Width already includes padding and border
The total value of `border-box` = the written value of `width`
Many projects arrange for consistent calculations

Full lesson

Code examples and quizzes

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