What is CSS Box Model?

This sentence is a repetition from all around the web. Just so that we stay relevant : every element in web design is a rectangular box.

I'm thinking, if every element in web design is a box, then what can I do with these boxes?

1. Change the size of the box.
2. Change the color of the box.
3. Change the background of the box.

Let us see how this box looks like:

Here's another one to calculate the height and width:

What is Block-level element?

1. Block-level elements by default start on a new line and occupies full page width.
2. Width and height properties are respected to block-level elements.
3. Using display property, block-level elements can be converted to block-inline, inline, etc.
4. Few block-level elements are div, p, pre, h1,h2,ul,ol.

What is inline element?

1. Inline elements by default occupies only required width based on content size.
2. Width and height properties are not respected/applicable to inline elements.
3. Using display property, inline elements can be converted to block, block-inline, etc.
4. Few inline elements are a,span, img, i.

Difference between Block and Inline elements.

1. Block-level elements by default start on a new line and occupies full page width. But, Inline elements by default occupies only required width based on content size.
2. Width and height properties are applicable to block-level element but not to inline elements.
3. Inline elements can be placed inside the block-level element, but block-level elements can not be placed inside the inline element.
4. Following padding and margin properties don’t affect inline elements
5. padding-top
6. padding-bottom
7. margin-top
8. margin-bottom Remaining padding and margin properties only affects inline elements.