The Box Model
Explore the CSS box model to understand how content, padding, border, and margin affect element size. Learn to calculate box dimensions and use the box-sizing property to include padding and borders within width and height for intuitive layout control.
Overview of the box model
When rendering a document, the browser sees each element as a rectangular box; this is the box model. CSS determines the size of the box, and is based on the following properties: