CSS Box Model

CSS Box Model

It is fact that every element in HTML is considered as box. Keeping This in mind, CSS box model is introduced. It plays major role in website design and layout, because through CSS box model, we can specify the size and placement of box, wraping the element.

CSS Box Model is made of 4 parts:

Content Area
Padding
Border
Margin

Here is graphical representation of it:

1. Content Area: Content area is the part in box model, where the content of element is placed. It can be text, images etc. In above graphical representation, the blue colored box is the content area.
2. Padding: Padding is empty transparent space around the content area. In graphical representation, the space, present in between blue colored content area and red colored rectangular border is Padding.
3. Border: The red colored rectangle in above graphical presentation, that is covering the padding is border. It lies in between padding and margin.
4. Margin: The area outside of the border is margin.

CSS Box Model can also be used to measure the totel height and width of element. For example: the totel width of element will be the sum of content area and right and left padings, borders and margins.

Note that when we specify the height and width of an element in CSS, it will change the height and width of content area. Also, when we specify the background-color for box, it will cover the content area and paddings.

-all info from sololearn lesson on CSS!😊