Meaning of the Box Model in CSS 🎨

 

✧ In HTML, all elements are considered as a box. A box comprises padding, border, and margin in addition to its actual content

✧ Content refers to the actual data text and images, etc.

✧ Padding is transparent. It adds space around the content.

✧ Border surrounds padding and content.

✧ Margin is also transparent. It clears areas outside the Border.

 Reset Browser Style Defaults

✧ I think this is a great way to ensure that your project looks its best and is consistent across all platforms.

Take a look at the image below 👇🏻

 Box Sizing

There are two ways to specify box sizing: 

    1. By default or content-box 

    2. border-box 

They automatically adjust the width based on the content size when we set the width.

1.. box-sizing: content-box

✧ The default box type is content-box. It sets the width of the content only, not the entire box. 

✧ Even though we set the padding to 300px, the width may alter depending on padding and border size.

See the example👇🏻

1. box-sizing: border-box;

✧ box-sizing property was first introduced in CSS3. 

✧ Specifying the box-sizing property to border-box sets the width of the entire box, not just the content.

For a better understanding look at the image below👇🏻

 

✧ All modern frameworks use the border-box approach, and box-sizing with the border-box setting can be helpful.

✧ To avoid writing this property in every element, you can specify it once in a universal `*` selector and it will apply to every HTML element.

 If we try to put too much text into an element that its height is not enough to hold it, the extra text will overflow outside of the element. 

✧ We can use the `overflow` property to specify what happens in this case.

 Depending on what we need, we can set overflow to auto, hidden, inherit, scroll, or visible.

✧ In this example, we have the overflow set to auto. This will add a scroll bar to help us better view the content within the given height.

Look how it works 👇🏻