✧ 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.
✧ 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 👇🏻
There are two ways to specify box-sizing:
- By default or content-box
- border-box
They automatically adjust the width based on the content size when we set the width.
✧ 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👇🏻
✧ 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👇🏻
There are two types of margin:
- Cumulative Margin
- Colapsing Margin
For better understanding see the illustration below 👇
✧ All modern frameworks use the border-box approach, and box-sizing with the border-box setting can be really 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 👇🏻
