Skip to main content

Box Model in CSS (Live Playground)

The CSS box model is a crucial concept for controlling the layout of elements on a web page. In this tutorial, you will learn about the box model, its components including content, padding, border, and margin, and how they affect the layout of elements, along with sample code and simple explanations.

Components of the box model​

The box model consists of four components:

  • Content: The actual content of the element, such as text or images
  • Padding: The space between the content and the border
  • Border: The line that surrounds the content and padding
  • Margin: The space between the border and surrounding elements

Visualizing the box model​

To understand the box model better, consider the following example:

Example:

CSS
div {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  padding: 10px;
  border: 5px solid darkblue;
  margin: 15px;
}
HTML
<div>This is a div element with padding, border, and margin.</div>

In this example, the div element has a content area of 200px by 100px, with a background color of lightblue. It has 10px of padding around the content, a 5px solid darkblue border, and a 15px margin around the border.

Live Playground, Try it Yourself

Calculating the total size of an element​

The total size of an element, including its padding, border, and margin, affects how it is positioned within the layout. To calculate the total size:

  • Horizontal size: width + (padding-left + padding-right) + (border-left + border-right) + (margin-left + margin-right)
  • Vertical size: height + (padding-top + padding-bottom) + (border-top + border-bottom) + (margin-top + margin-bottom)

Using the example above, the total size of the div element is:

  • Horizontal size: 200px + (10px + 10px) + (5px + 5px) + (15px + 15px) = 260px
  • Vertical size: 100px + (10px + 10px) + (5px + 5px) + (15px + 15px) = 160px

Conclusion​

In this tutorial, you learned about the CSS box model and its components, including content, padding, border, and margin. By understanding the box model and how it affects the layout of elements, you can create more precise and consistent designs across your web pages.