Once the browser receives the HTML for a page, it must render the visible elements within the browser's viewport. The rendering algorithm abstracts each element into a box, which is more manageable to arrange than the amorphous content within the box. This abstraction is called the CSS Box Model.
The content forms the core of each box in the Box Model. Around this core are three layers. CSS provides a set of properties that influence how these layers appear in the browser. You must have a thorough understanding of these properties in order to make your page readable. Let's examine these layers by building up a visualization of them.
Consider first this div element, which will serve as a frame of reference for boxes that will later appear inside:
A background color has been declared on the div, but you see no color in the Preview panel. Try inspecting the div in your browser's developer tools. Right-clicking on it will be impossible. Inspect anywhere in the Preview panel, and then navigate the element tree until you find it.
You'll see that the div has a height of 0. By default, the height property of an element is set to auto, which tells the browser to compute the height so that the box fits snugly around the content. In this case, there is no content, so the height is 0. Try setting the height of class .outer to some non-zero number of pixels. Then try explicitly setting it to auto.
When the height is non-zero and non-auto, you see that the div element fills its entire line. That's because div is a block element by default. The rest of this illustration will be clearer if div elements are made to not automatically fill the width. You do this by changing their display property to inline-block:
The div needs both its width and height set for it to have a visible surface. Now consider this child box that has no explicit size but does have some content:
Try inspecting the parent and child elements in the developer tools. You'll find that the elements have the same sizes. The outer div snugly wraps the inner div. See what happens when the inner div is given its own background color:
You can't even tell the outer div is there. A border will help you confirm its presence:
A day will come in which you will want to add some breathing room between a child element and its parent. The margin property allows you to add this spacing:
Margin is the outermost layer of the box model. Note how the margin reveals the parent's background color, not the child's. As with the border properties, it can be set to a series of 1, 2, 3, or 4 values to target particular edges:
The next layer of the box model is the border, which you have already seen. The child's border lies right inside its margin:
Note that the background color behind the border, which you can only see when the border is not solid, comes from the child, not the parent.
The innermost layer of the boxel model is padding. Margin is spacing around an element, whereas padding is spacing within an element:
Why should you care about these layers? Presumably, you are designing a webpage that communicates something that is important to you or your livelihood. You need to care about the presentation of what you are communicating. If a page is too cramped, the viewer will not enjoy your reading your content. If a page is too spaced apart or if it lacks alignment, the viewer will not be able to put your content into coherent chunks.