CSS Box Model?
Box model is a css concept and a very important concept in css and mostly related with layout of html elements.
An html element = content box + padding (inner space between content and border) + border. Also an html elements looks like a rectangular box.
At this phase we need to understand 4 concepts::
Box model says :
The width of an html element, once set = content width + padding right and left + border width right and left, no matter if you increase the padding or border size (content width will decrease then to compensate for that), the element width will always be the set width
and
the height of an html element, once set = content height + padding top and bottom + border height top and bottom, no matter if you increase the padding or border height (content height will decrease then to compensate for that), the element height will always be the set height .
And the box model in css is implemented by box-sizing: border-box.
The default html element with respect to margin and padding and border looks something like this as shown below:
An html element = content box + padding (inner space between content and border) + border. Also an html elements looks like a rectangular box.
At this phase we need to understand 4 concepts::
- Content/Content Box : It is the actual content or text of the html element.
- Padding : It is empty space between content and border of an html element.
- Border : It is line that represents the final boundry of an html element. Beyond it, element does not exists. Inside the border, we will have content and padding.
- Margin : It is space between 2 nearby html element or space between borders of 2 nearby html elements.
Box model says :
The width of an html element, once set = content width + padding right and left + border width right and left, no matter if you increase the padding or border size (content width will decrease then to compensate for that), the element width will always be the set width
and
the height of an html element, once set = content height + padding top and bottom + border height top and bottom, no matter if you increase the padding or border height (content height will decrease then to compensate for that), the element height will always be the set height .
And the box model in css is implemented by box-sizing: border-box.
The default html element with respect to margin and padding and border looks something like this as shown below:
+-------------------------------------------+ | Margin | +-------------------------------------------+ | Border | | +---------------------------------+ | | | Padding | | | | +-----------------------+ | | | | | Content Box | | | | | | | | | | | +-----------------------+ | | | | | | | +-------------------------------+ | | | +-----------------------------------------+
Why we needed a css box model?
By default an html element does not follow box model as default css property for box sizing is
box-sizing: content-box, which means that once you set a width property of 500px,
then it is set to Content box in the above UI. And if you set padding-right and padding-left as 20px and also if
you set the border-right-width and border-left-width also as 5px then the total width of that html element
= 500px width + (20*2) padding right and left + (5*2) border right width and left width
= 550px.
And this is what becomes the total width of an html element, on the contrary we initially set the width as 500px, which should happen . And to fix this inconsistency, we use box model meaning once we set the width as 500px then it becomes the total width of an html element (and not of content box), and if you apply padding right/left and/or border width left/right then this increases widths will definately count but it will reduce the width of content box (or it will squeeze it). Thus set width will always be the fixed width of an html element even if you provide padding or border or not. Thats how we provide consistency.
We provide consistency by putting this line of code in css file on top of the file. It removes additional margin and padding that block or inline-block elements has and makes all the elements follow box model.
And this is what becomes the total width of an html element, on the contrary we initially set the width as 500px, which should happen . And to fix this inconsistency, we use box model meaning once we set the width as 500px then it becomes the total width of an html element (and not of content box), and if you apply padding right/left and/or border width left/right then this increases widths will definately count but it will reduce the width of content box (or it will squeeze it). Thus set width will always be the fixed width of an html element even if you provide padding or border or not. Thats how we provide consistency.
We provide consistency by putting this line of code in css file on top of the file. It removes additional margin and padding that block or inline-block elements has and makes all the elements follow box model.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}