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!!

Comments

[Gary Storey]

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;
}

Maybe provide an example of the other as well.