Box Model
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:
width
andheight
: 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.
Content Area
This area contains the actual content of an element, including text and images. It also sometimes has a background-color
or background-image
.
Padding Area
This area is located between the content and border areas. It can be changed on the top, right, bottom and left sides.
Border Area
This area is located between the margin and padding areas. Their thickness and style can be changed.
Margin Area
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.
Contribute to Docs
- 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
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours