You have read enough about the box model. It's time to start putting all this knowledge together to make interfaces for the web. Let's start with the monocolumn, a single-column layout that one encounters frequently in blogs.
Suppose the content has this general structure:
The paragraphs will fill the browser viewport by default. If the browser window gets very large, the lines will be very long and hard to read. You can constrain the length by imposing a width on the main element:
Many websites set the content width to 960 pixels, a number that is compatible with many devices and which makes for lines of readable length. The width here is set to 50% only because the content must be squeezed inside the Preview panel.
A background color adds some distinction between the main content and the larger body element:
These colors reveal a couple of spacing concerns. First, monocolumns are often centered within the page. Perhaps unexpectedly, this can be done by setting both the left and right margins to auto:
This method of centering only works for block elements whose widths are not auto. If you need to center an element whose width is unknown, you'll have to find another strategy.
The next issue is the strip of gray at the top of the page. Try using your browser's developer tools to see what is causing this.
Most browsers add some margin to the body element by default, so perhaps zeroing out the margin will remove the gray strip at the top?
Nope. The issue here is subtle. Try inspecting one of the paragraphs. Observe its margin. Observe the margin of the other paragraph. Both have the same margin sizes, yet the spacing between them is only as big as one margin. That's because the margins are collapsed. The margins between two adjacent elements are combined to be only as big as the bigger of the two.
Margin collapse is a useful feature that usually improves the regularity of the whitespace on your page. But sometimes it surprises you. Like now. Not only does margin collapse happen between sibling elements, but also between parents and their first and last children. In this case, the first child is a heading element. Its margin is collapsed with the body's margin. The body had a margin of 0 before the collapse, but it slurps up the heading's margin. Thus you see the body's background color above the heading.
Margin collapse can be disrupted by inserting a border, padding, or content between the collapsing margins. Try adding some raw text before the heading element, and you'll see the gray strip disappear.
A better fix is to use padding. The main element already needs some padding since the text runs right up against its edge. This looks much better:
To ensure that the width includes this padding, the box-sizing property has also been updated to border-box.
What happens when there isn't a lot of content on the page?
To make the column still fill the page even when the content is much smaller, you could set the height to fill the viewport:
But what happens on a page whose content exceeds the height of the viewport? Try scrolling down in the Preview panel:
The text overflows because the main element is too short. Instead of fixing the height, you use min-height property to impose a lower bound:
Now the main element will be no shorter than the viewport, but the browser is free to make it taller. Try deleting the content inside the main element. Does the column still fill the page?