What is the CSS Box Model?

What is the CSS Box Model?
October 23, 2023

Imagine every HTML element on your webpage as a box. This box has multiple layers that can be adjusted using CSS:

  • Content - The actual content of the element, such as text, images, etc.
  • 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 other elements next to it.

The total size of the box (width and height) is determined by adding up all these layersLet's say you have a div element, and you style it like this:

Here's a breakdown of the box's total width and height:

1. Content: 100px

2. Padding: 10px on the left + 10px on the right = 20px

3. Border: 5px on the left + 5px on the right = 10px

So, the total width = content + left padding + right padding + left border + right border = 100px + 10px + 10px + 5px + 5px = 130px.

Note: Margin does not add to the width/height of the box itself. Instead, it affects how far this box is from other elements.

The height would be calculated in a similar manner, also resulting in 130px in this case.

Resources for You

ChatGPT Guide For Software Developers

Learn to use ChatGPT to stay ahead of competition

Front-End Developer Interview Kit

Today, Start preparing to get your dream job!

JavaScript Developer Kit

Start your JavaScript journey today!

Are you looking for Front-end Developer Job?

Get Front-end Interview Kit Now, And Be Prepared to Get Your Dream Job

Get Front-end Interview Kit

Newsletter for Developers!

Join our newsletter to get important Web Development and Technology Updates