Too Long; Didn't Read
The CSS box model is a term thrown around in CSS with very little frame of reference, but it is probably one of the most fundamental things you can know in CSS.
Simply put, the box model determines, the size, margin, and padding of any object on the page. It also refers to the weird way CSS handles 'inline' and 'block' content.
The Box Model
In HTML, every element creates a box. Some of these elements, such as span and p are inline, meaning they are in line with text, rather than structural elements of the page.
Other elements, like div are large 'block' elements. Each element carries a different type, so getting familiar with these is useful when learning both HTML and CSS.
Block elements have a fixed width and height which sometimes span the entire page, while inline elements are within lines of text, meaning they have content floating beside them.
Another type of element which is often used, is an inline-block, which is simply a block of fixed width and height, within an inline context, such as within a block of text.