Introduction to Box Model
Every element in a browser is a rectangular box. It has some properties like Width, Height, Padding, Border, Margin, etc. Elements also have many types like Block-level elements, Inline-level elements, Inline-block.
Width:-
The width property sets the width of an element.
Note: The min-width and max-width properties override the width property.
width: margin-left + border-left + padding-left + width + padding-right + border-right + margin-right;
Height:-
The Height property sets the height of an element.
height: margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom;
Padding:-
It gives some gaps between content and box, it applies inside of the box, so it does not affect the actual height and width of the box. there are many ways to give padding to any element. There are few of them -
1- padding-left: 10px;
2- padding-right: 10px;
3- padding-top: 10px;
4- padding-bottom: 10px;
or,
we can just give these all properties in a line, it is called short-hand property.
5- padding: 10px 10px 10px 10px;
Border:-
It gives the border to the element. it has some property like type, color, etc.
there are few of them-
*border-type: solid|double|dashed|dotted|none;
*border-color: black|blue|red; or any color.
Ex:-
border: 10px solid red;
or, we can give separate value. like-
border-bottom-color: blue;
Margin:-
It creates gaps surrounding the element. It affects
the actual height and width of the box. it can be used in many ways same as padding, it accepts negative value also.
1- margin-left: 10px;
2- margin-right: 10px;
3- margin-top: 10px;
4- margin-bottom: 10px;
or,
5- margin: 10px 10px 10px 10px;
Block-level Boxes:-
It takes height as the actual height of the content, but it covers the whole width. and another content starts from the next line. It accepts the height, width, border, margin, and padding. but padding does not affect the actual width and height of the box. because it gives the gap inside the box. but border and margin affect the actual width and height of the box.
Inline-level Boxes:-
It covers only what the content’s height and width. It does not accept height and width. and it also does not accept margin-top and margin-bottom. But It accepts margin-left and margin-right and padding. Another content starts next to it.
Inline-Block Boxes:-
It contains properties of both inline-level and box level. It accepts height and width as well as margin and padding. if we want to add another elements or contents it will go next to it.
Box-sizing:-
It contains four boxes. Content-box, Padding-box, Border-box, Margin-box.
Content-box:-
It contains elements or contents. It has some width and height.
like- 200*100, where 200 is the height and 100 is the width.
Padding-box:-
It includes some space surrounding the content box but it does not affect the height and width of the box, because it creates spaces inside the box.
like if our box size is 200*100 when we give padding: 10px; it creates spaces inside 200*100.
Border-box:-
It gives the border to our content box, and padding remains inside this box. like padding does not affect it. It has some properties like type, color, style, etc;
Margin-box:-
It increases some spaces surrounding to our border box, and it was affected by width and height. like if we have a box which size is 400*400, and we give margin: 20px; now it will increase width and height. now our box size will be
440*440.
