A centred, readable article – CSS Practice Problem

Lay out an article that is centred and comfortable to read.

What to build

Three rules.

Requirements

article has a max-width of 300px, centred with auto side margins.
Two neighbouring paragraphs are separated by exactly 20px, given that each p has margin: 20px 0.
pre has overflow: auto and padding: 12px.

Constraints

Do not use a fixed width on article.

Example

margin: 0 auto; centres a block that has a width or max-width.

Why it works

Automatic margins split the spare room equally, and collapsing margins keep the gaps between paragraphs even.

Hints

Hint 1

max-width keeps a long line readable and still allows shrinking.

Hint 2

margin auto on both sides shares the leftover space.

Hint 3

Overflow auto gives the code box its own scrollbar.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article</title>
  <style>
    article { max-width: 300px; margin: 0 auto; }
    p { margin: 20px 0; }
    pre { overflow: auto; padding: 12px; }
  </style>
</head>
<body>
  <article>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <pre>a very long line of code that would otherwise break out of the column it sits inside</pre>
  </article>
</body>
</html>

Lesson: The box model →