DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Jayant Khandelwal
Jayant Khandelwal

Posted on

The Box Model

Whether you're a rookie, an experienced developer or someone in the center of the stack, one of the most crucial CSS concepts to comprehend is "๐“๐ก๐ž ๐๐จ๐ฑ ๐Œ๐จ๐๐ž๐ฅ."

Q.) What Is "The Box Model"?

โžก๏ธ "According to the box model concept, every element on a page is a rectangular box and may have width, height, padding, borders, and margins."

๐Š๐ž๐ž๐ฉ ๐ข๐ง ๐Œ๐ข๐ง๐: Every element on a page is a rectangular box.

Every element is a rectangular box, and there are several properties that determine the size of that box.

The core of the box is defined by the width and height of an element, which may be determined by ๐Ÿงต:

  1. The ๐™™๐™ž๐™จ๐™ฅ๐™ก๐™–๐™ฎ property, or 2.The ๐™˜๐™ค๐™ฃ๐™ฉ๐™š๐™ฃ๐™ฉ of the element, or 3.The specified ๐™ฌ๐™ž๐™™๐™ฉ๐™ and ๐™๐™š๐™ž๐™œ๐™๐™ฉ properties.

๐™ฅ๐™–๐™™๐™™๐™ž๐™ฃ๐™œ and ๐™—๐™ค๐™ง๐™™๐™š๐™ง, expand the dimensions of the box outward from the elementโ€™s width and height.

๐™ข๐™–๐™ง๐™œ๐™ž๐™ฃ we have specified will follow the border.

Each part of the box model corresponds to a CSS property: ๐™ฌ๐™ž๐™™๐™ฉ๐™, ๐™๐™š๐™ž๐™œ๐™๐™ฉ, ๐™ฅ๐™–๐™™๐™™๐™ž๐™ฃ๐™œ, ๐™—๐™ค๐™ง๐™™๐™š๐™ง, and ๐™ข๐™–๐™ง๐™œ๐™ž๐™ฃ!

The size of the box itself is calculated like this:

๐—ช๐—ถ๐—ฑ๐˜๐—ต = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

๐—›๐—ฒ๐—ถ๐—ด๐—ต๐˜ = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

Happy Coding!!

Box Model Image

Top comments (1)

Collapse
 
garystorey profile image
Gary Storey • Edited on

You only gave an example of one of the box models. There are two: border-box and content-box. The example you gave is using border-box which is not the default and has to be set with the box-sizing property. It is typically set like:

*, *::before, *::after {
  box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

Maybe provide an example of the other as well.

๐ŸŒš Friends don't let friends browse without dark mode.

Sorry, it's true.