HTML --> Sturcture the content.
CSS --> Style the content.
Everything in CSS is a box.
Be it a circle in CSS --> basically, we give border-radius to the box.
Sounds simple box. But!
Things get weird when you dig deeper.
The box containing the content will be the content box.
What are the areas of the Box model?
Content --> width and height of an element (<h tags>, <p>,<div>, or any HTML element).
Padding --> area inside the element.
Border --> goes around content and padding.
Margin --> area outside the element.
Brush up the HTML basics!
There are two primary types of elements --> inline and block.
A block-level element
always starts on a new line.
and takes up the full width available - stretches left and right as far as possible.
by default, has top and bottom margins.
An inline element
does start on a new line
and only takes up as much width as necessary.
One significant difference between inline and block elements is
we can control the size(width and height) of block elements.
but we can't control the size of inline elements.
Both block and inline element has been given width and height properties.
But only block elements respond to the sizing.
Inline elements take whatever the content size is. We can't specify it through height and width!
We can change this default using a CSS property called 'display.'
We can convert inline to block if you specify width and height externally.
But if needed, both features(i.e., inline(not starting a new line) and external size control(block width and height).
You need to specify display: "inline-block"
We will get into the box model now!
Place a div inside the body tag.
Wkt div is a block element - that takes up full width, and external sizing can be done.
Have this CSS applies to div.
Now inspect the element,
Content --> Padding --> Border --> Margin.
Note: The content box didn't have a height(200 x 0).
We will add some content.
Now it has some height based on the content.
Since div is a block element, we can also give external height.
At which box element end?
We have 4 boxes -> content, padding, border, and margin.
Element end at the border box.
Therefore margin box indicates space around an element or space between elements.
If I give height and width to div, to which box am I specifying?
It is clear from above that width and height we give in CSS are directly concerned with the content box.
The padding and border-box include element size, but the size we give in CSS is the content size(width and height).
So the size we specify is content size, and that's the default behavior.
We can change this behavior by a property called box-sizing.
The default box-sizing is content-box(explained above), and we can change this by setting the box-sizing property to border-box.
Notice,
The content box width was reduced to 80px even though we gave 200px as the width in CSS.
Now that we have box-sizing as border-box, it tries to accommodate padding size(left and suitable) and border size(left and right) to 200px.
Remember, it won't take margin size because it is out of the element.
So,
Content-box-sizing = default = excludes padding and border size = only content width.
Border-box-sizing = change box-sizing property = includes padding, border, and content size.
Just play with it by doing.
Do this to understand,
What happens when the width you give in CSS is lesser than the padding and border size combined?
Do it for both cases and inspect the dev tools.
Calculate element width for both cases and understand when to include padding and border based on the dev tools display.