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 ๐งต:
- 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!!
Top comments (1)
You only gave an example of one of the box models. There are two:
border-boxandcontent-box. The example you gave is usingborder-boxwhich is not the default and has to be set with thebox-sizingproperty. It is typically set like:Maybe provide an example of the other as well.