Published Jul 27, 2021Updated Sep 9, 2021
Contribute to Docs
The Box Model is a CSS layout mechanism that the web browser uses to render content organized by box-shaped elements. Each element is made of four specific areas:
height: The width and height of the content area.
padding: The amount of space between the content area and the border.
border: The thickness and style of the border surrounding the content area and padding.
margin: The amount of space between the border and the outside edge of the element.
This area contains the actual content of an element, including text and images. It also sometimes has a
This area is located between the content and border areas. It can be changed on the top, right, bottom and left sides.
This area is located between the margin and padding areas. Their thickness and style can be changed.
This is the outermost area in the Box Model. It borders with the margin areas of neighboring elements. It can be changed on the top, right, bottom and left sides.
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
Front-End EngineerFront-end engineers work closely with designers to make websites beautiful, functional, and fast.
Includes 34 Courses
With Professional Certification